JS如何使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能
这篇文章给大家分享的是有关JS如何使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联服务项目包括资兴网站建设、资兴网站制作、资兴网页制作以及资兴网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，资兴网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到资兴省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
具体如下：
HTML部分：
点击除开div的区域可以弹出弹窗
点击除开div和弹窗的区域可以关闭弹窗 CSS部分：
#div{
/*设置z-index属性必须设置position:relative或absolute*/
position:relative;
/*设置div位于遮罩的上方*/
z-index:2;
width:300px;
height:200px;
border:1px solid grey;
}
#cover{
position:fixed;
width:100%;
height:100%;
left:0;
top:0;
/*设置遮罩位于div的下方*/
z-index:1;
}
#box{
border:1px solid grey;
/*当弹窗显示时，屏幕滚动时，弹窗始终保持位置固定在屏幕正中，不随屏幕滚动而变化位置*/
position:fixed;
width:400px;
height:300px;
left:50%;
top:50%;
/*配合left:50%和top:50%属性使得浮出层的中心默认在屏幕正中，margin-top为height的一半，margin-left为width的一半*/
margin:-150px 0 0 -200px;
/*设置弹窗位于遮罩的上方*/
z-index:2;
/*开始时隐藏弹窗*/
display:none;
}JavaScript部分：
document.getElementById("cover").onclick = function() {
if (document.getElementById("box").style.display == "block") {
document.getElementById("box").style.display = "none";
document.getElementById("cover").style.background = "white";
}
else {
document.getElementById("box").style.display = "block";
document.getElementById("cover").style.background = "#aaa";
}
}感谢各位的阅读！关于“JS如何使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
网站栏目：JS如何使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能
新闻来源：http://jkwzsj.com/article/gdpojg.html
