代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#mask {
width:100%;
height:100%;
background-color:#000;
position:absolute;
top:0;
left:0;
z-index:2;
opacity:0.3;
/*兼容IE8及以下版本浏览器*/
filter: alpha(opacity=30);
display:none;
}
#dialog {
width:200px;
height:200px;
background-color:white;
margin: auto;
position: absolute;
z-index:3;
top: 0;
bottom: 0;
left: 0;
right: 0;
display:none;
}
</style>
</head>
<body>
<div id="mask"></div>
<div id="dialog">
<a href="javascript:hideDialog()">关闭</a>
</div>
<button id='popMaskBtn'>弹出遮罩层</button>
</body>
<script>
//遮罩层
var mask = document.getElementById("mask");
//弹框
var dialog = document.getElementById("dialog");
//窗口加载完成事件
window.onload = function(){
//为弹出遮罩层的按钮添加事件
document.getElementById("popMaskBtn").addEventListener('click',function(){
mask.style.display = "block";
dialog.style.display = "block";
});
//添加点击事件-点击遮罩层后关闭遮罩层
window.addEventListener("click",function(event){
if(event.target == mask){
hideDialog();
}
});
};
//关闭遮罩层
function hideDialog(){
mask.style.display = "none";
dialog.style.display = "none";
}
</script>
</html>
实现效果:
点击按钮，显示遮罩层，弹出弹框
点击遮罩层，隐藏遮罩层，隐藏弹框
网友评论