我们来分析一下思路：
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教程
以上就是js如何实现蒙版效果的详细内容，更多请关注24课堂在线网其它相关文章！
