代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.cov{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .2);
display: none;
}
.con{
width:600px;
height:200px;
position: absolute;
background-color:white;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
p {
text-align: center;
line-height: 200px;
}
</style>
<body>
<div class = "cov">
<div class = "con">
<p>弹层内容</p>
</div>
</div>
<button>点我出现弹层</button>
</body>
<script>
let bt=document.querySelector('button')
let cov=document.querySelector('.cov')
let con=document.querySelector('.con')
//点击按钮出现弹层 （阻止冒泡）
bt.onclick=function(e) {
cov.style.display='block'
}
// 在弹层里点击时候不关闭弹层（阻止冒泡）
con.onclick=function(e) {
e.stopPropagation()
}
// 点击页面关闭弹层
cov.onclick=function() {
cov.style.display='none'
}
</script>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手