这篇文章将为大家详细讲解有关js如何实现蒙版效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
具体内容如下
思路
1.监听按钮的点击
2.阻止冒泡（最关键的一点）
3.让隐藏的显示出来
4.隐藏滚动条
5.点击文档：获取点击的标签
判断：让显示的都隐藏
显示滚动条
计算
安全
数据库
网络和加速
企业服务
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width:100%;
height:100%;
}
#panel{
width:100%;
height:2000px;
background-color:#000;
opacity: 0.4; //透明度
filter: alpha(opacity： 40); //用于兼容IE浏览器
position: absolute;
top:0;
left:0;
display: none;
}
#box{
width:300px;
height:300px;
background-color: #fff;
position: absolute;
top:50%;
left:50%;
margin-left:-150px;
margin-top:-150px;
display: none;
border-radius: 5px;
}
</style>
</head>
<body>
<button id="btn">登录</button>
<div id="panel"></div>
<div id="box"></div>
<script src="js/myFunc.js"></script>
<script>
window.onload = function (){
//1.监听事件的点击
btn.onclick = function (event){
//1.0 阻止冒泡
if(event && event.stopPropagation){ //W3c标准
event.stopPropagation();
}else{ //IEx系列 IE 678
event.cancelBubble = ture;
}
//1.1隐藏的显现出来
$("box").style.display = "block";
$("panel").style.display = "block";
//1.2隐藏滚动条
document.body.style.overflow = "hidden";
}
//2.点击文档
document.onclick = function (event){
var e = event || window.event;
//2.1获取点击的标签
var tranId = e.target ? e.target.id : e.srcElement.id; //target:获取当前操作对象
//2.2判断
if(tranId !== "box"){
//1.1显示的隐藏出来
$("box").style.display = "none";
$("panel").style.display = "none";
//1.2显示滚动条
document.body.style.overflow = "auto";
}else{
window.location.href = "http://www.baidu.com";
}
}
}
</script>最为重要的一点是要阻止事件冒泡
获取对象的id： var tranId = e.target ? e.target.id : e.srcElement.id;
关于“js如何实现蒙版效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
