如何实现点击按钮时弹出带遮罩可关闭的自定义居中弹窗

需求回顾 #

点击页面中任意按钮，弹窗居中显示，同时屏幕变暗；点击屏幕任意区域（包括遮罩）关闭弹窗。现有弹窗CSS设置为display:none。

步骤1：补充HTML结构 #

先添加一个全屏遮罩层，用来实现屏幕变暗的效果：

<div id="main">
    <div id="inner-15" class="inner"></div>
</div>

<!-- 遮罩层 -->
<div class="overlay"></div>
<!-- 弹窗 -->
<div class="smallFrame"></div>

步骤2：调整CSS样式 #

修改现有CSS，添加遮罩层样式，同时让弹窗精准居中：

body {
    display: flex;
    justify-content: center;
    margin: 1.2em;
    /* 弹窗显示时禁止页面滚动 */
    overflow: hidden;
}

button {
    background: rgba(0, 0, 0, 0);
    color: #a5afaa;
    border: 1px solid white;
    border-radius: .6em;
    padding: 3em;
}

button:hover {
    border-color: #fff8cc;
    box-shadow: 0em 0em 1em 0em yellow;
}

#main {
    border: solid 2px #939388;
    border-radius: 10px;
    background-color: #0f0f3de8;
    box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
}

.inner {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
}

/* 遮罩层样式 */
.overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 999;
}

/* 弹窗样式调整，实现居中 */
.smallFrame {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    /* 通过平移实现精准居中 */
    transform: translate(-50%, -50%);
    border: solid 2px #939388;
    border-radius: 10px;
    background-color: #0f0f3de8;
    box-shadow: 0 0.1em 0.3em 0.1em rgba(0, 0, 0, 0.6);
    width: 400px;
    height: 250px;
    /* 层级比遮罩高，确保弹窗在最上层 */
    z-index: 1000;
}

步骤3：编写JavaScript交互逻辑 #

给所有按钮添加点击事件，控制弹窗和遮罩的显示/隐藏；同时添加关闭逻辑：

var containerDiv = document.querySelector("#main");
let tempCounterBtn = 0;
for (let i = 0; i < 2; i++) {
  let newDiv = document.createElement("div");
  newDiv.id = "div-" + (i + 1);
  containerDiv.appendChild(newDiv);
  for (let x = 0; x < 6; x++) {
    let btn = document.createElement("button");
    btn.id = "button-" + (tempCounterBtn + 1);
    tempCounterBtn++;
    newDiv.appendChild(btn);
  }
}

// 获取元素
const buttons = document.querySelectorAll('button');
const modal = document.querySelector('.smallFrame');
const overlay = document.querySelector('.overlay');

// 按钮点击事件：显示弹窗和遮罩
buttons.forEach(btn => {
  btn.addEventListener('click', () => {
    modal.style.display = 'block';
    overlay.style.display = 'block';
  });
});

// 点击遮罩关闭弹窗
function closeModal() {
  modal.style.display = 'none';
  overlay.style.display = 'none';
}

overlay.addEventListener('click', closeModal);

// 可选：避免点击弹窗内部误关闭，阻止事件冒泡
modal.addEventListener('click', (e) => {
  e.stopPropagation();
});

内容的提问来源于stack exchange，提问作者Dylan