js如何实现蒙版效果

互联网 20-4-6

我们来分析一下思路：

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如何实现蒙版效果

相关资讯

标签推荐