js实现蒙版效果


Posted in Javascript onJanuary 11, 2020

本文实例为大家分享了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;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
改写一个简单的菜单 弹性大小
Dec 02 Javascript
jQuery技巧总结
Jan 01 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 Javascript
在JavaScript中使用对数Math.log()方法的教程
Jun 15 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
jQuery实现查看图片功能
Dec 01 jQuery
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
js实现橱窗展示效果
Jan 11 #Javascript
vue实现购物车选择功能
Jan 10 #Javascript
webpack proxy 使用(代理的使用)
Jan 10 #Javascript
基于vue-draggable 实现三级拖动排序效果
Jan 10 #Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 #Javascript
jQuery操作动画完整实例分析
Jan 10 #jQuery
基于JavaScript判断两个对象内容是否相等
Jan 10 #Javascript
You might like
QueryPath PHP 中的jQuery
2010/04/11 PHP
php数组去重的函数代码
2013/02/03 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
Javascript模拟加速运动与减速运动代码分享
2014/12/11 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
深入了解JavaScript的逻辑运算符(与、或)
2016/12/20 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
[02:16]DOTA2英雄基础教程 干扰者
2014/01/15 DOTA
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
Python遍历指定文件及文件夹的方法
2015/05/09 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
更新修改后的Python模块方法
2019/03/03 Python
django表单的Widgets使用详解
2019/07/22 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
Python txt文件如何转换成字典
2020/11/03 Python
How to spawning asynchronous work in J2EE
2016/08/29 面试题
干部培训自我鉴定
2014/01/22 职场文书
追悼会子女答谢词
2014/01/28 职场文书
课程设计的心得体会
2014/09/03 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
java版 简单三子棋游戏
2022/05/04 Java/Android