js如何实现蒙版效果

前端  /  管理员 发布于 7年前   236

我们来分析一下思路：

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如何实现蒙版效果的详细内容，更多请关注其它相关文章！


  • 上一条：
    css如何实现下划线滑动效果
    下一条：
    css中device-width与width有什么区别

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客