js多个按钮弹出一个层 内容不一样

实现这个功能可以采用JavaScript+CSS的方式来完成。首先在HTML中定义一个弹出层的容器，并设定其样式为隐藏：

<div id="popup" style="display: none;"></div>

然后在JavaScript中为每个按钮添加点击事件，点击时弹出层并根据按钮不同，动态添加相应的内容：

// 获取按钮元素
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
// 获取弹出层元素
var popup = document.getElementById("popup");

// 给按钮1添加点击事件
btn1.onclick = function() {
  // 添加内容到弹出层
  popup.innerHTML = "这是按钮1弹出的内容";
  // 显示弹出层
  popup.style.display = "block";
}

// 给按钮2添加点击事件
btn2.onclick = function() {
  // 添加内容到弹出层
  popup.innerHTML = "这是按钮2弹出的内容";
  // 显示弹出层
  popup.style.display = "block";
}

最后使用CSS来设定弹出层的样式，以及通过点击其他位置隐藏弹出层：

#popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 999;
}

// 点击其他位置隐藏弹出层
document.onclick = function(e) {
  if (e.target != btn1 && e.target != btn2 && e.target != popup) {
    popup.style.display = "none";
  }
}

这样就可以实现多个按钮弹出一个层，内容不一样的功能了。