前端按钮点击后显示黑色遮罩 在遮罩层显示对应内容

这是一个常见的前端需求，可以通过以下步骤来实现：

1. 在 HTML 文件中添加一个按钮元素，并为其绑定一个点击事件。
2. 在 CSS 文件中定义一个黑色半透明遮罩层的样式，并设置其为隐藏状态。
3. 在 HTML 文件中添加一个用于显示内容的元素，并设置其为隐藏状态。
4. 在 JavaScript 文件中编写点击事件处理程序，使其在按钮被点击时显示遮罩层和内容元素。
5. 在 JavaScript 文件中编写关闭事件处理程序，使其在遮罩层或内容元素被点击时隐藏遮罩层和内容元素。

以下是一个简单的代码示例：

HTML:

<button id="myButton">点击我</button>
<div id="overlay"></div>
<div id="content">这是要显示的内容</div>

CSS:

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

#content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  display: none;
}

JavaScript:

const myButton = document.getElementById('myButton');
const overlay = document.getElementById('overlay');
const content = document.getElementById('content');

myButton.addEventListener('click', function() {
  overlay.style.display = 'block';
  content.style.display = 'block';
});

overlay.addEventListener('click', function() {
  overlay.style.display = 'none';
  content.style.display = 'none';
});

content.addEventListener('click', function(event) {
  event.stopPropagation();
});

这样，当用户点击按钮时，会显示一个黑色半透明遮罩层和一个包含内容的弹窗。当用户点击遮罩层或弹窗时，它们会被隐藏。