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://pwwzsj.com/article/gdpojg.html