自定义弹窗，演示如何阻止事件冒泡，HTML/Vue代码在线实时编辑、预览

HTML

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

<head> ...

展开

</head>

<body>

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

            
            <!-- 弹窗背景半透明蒙层 -->
<div class="box_bg">
  <!-- 弹窗主体 -->
  <div class="box">
    <h3>这是一个弹窗</h3>
    <!-- 弹窗内有个输入框 -->
    <input type="text">
    <p><i>点击弹窗外的背景蒙层可关闭弹窗</i></p>
    <p><i>因为阻止了事件冒泡，所以点击弹窗里的内容不会关闭弹窗</i></p>
  </div>
</div>

<button class="btn">
  显示弹窗
</button>

</body>

CSS

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

            
            * {
  box-sizing: border-box; 
}
body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* 半透明蒙层 */
.box_bg {
  position: fixed;
  width: 100%;
  height: 100vh;
  padding: 15px;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.5);
}

.box_bg .box {
  background: #fff;
  padding: 0 15px;
  border-radius: 6px;
}

.btn {
  display: block;
  margin: auto;
  font-size: 2em;
}

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

            
            const box_bg = document.querySelector('.box_bg');
// 点击半透明蒙层，关闭弹窗
box_bg.addEventListener(
  'click', 
  () => {
    box_bg.style.display = "none";
  }
)

// 点击「显示弹窗」按钮
document.querySelector('.btn').addEventListener(
  'click', 
  () => {
    box_bg.style.display = "flex";//
  }
)

// 点击弹窗内部，阻止事件冒泡，避免触发父级关闭弹窗
//【当你注释掉这里，点击弹窗里内部，会关闭弹窗】
document.querySelector('.box_bg .box').addEventListener(
  'click',                                               
  (event) => {
    event.stopPropagation() //阻止事件冒泡
  }
)

预览

控制台