使用JavaScript实现蒙版效果方法

今天小编分享一个使用JavaScript实现蒙版效果方法，

首先我们来分析一下思路：

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;      }            登录    
    
        

最为重要的一点是要阻止事件冒泡。

获取对象的id：

var tranId = e.target ? e.target.id : e.srcElement.id;

以上就是使用JavaScript实现蒙版效果方法的详细内容。