专注国内外云服务器
分享建站技术教程

使用JavaScript实现蒙版效果方法

立即购买

阿里云服务器 ¥102元/年 云数据库37.5元/年 限时

个人、企业均可购买 | 更多配置0.8折特惠

吾上云WORDPRESS教程最新“使用JavaScript实现蒙版效果方法”

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

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

1、监听按钮的点击

2、阻止冒泡(最关键的一点)

3、让隐藏的显示出来

4、隐藏滚动条

5、点击文档:获取点击的标签

判断:让显示的都隐藏

显示滚动条

    *{
      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;
    }
  
  
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"; } } }

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

获取对象的id:

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

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

文章来源于互联网WORDPRESS教程:使用JavaScript实现蒙版效果方法,
阿里云服务器89元起,点击购买
腾讯云服务器95元/年起 点击购买

相关推荐: 9款适用于WordPress的最佳PDF阅读/嵌入/下载插件

默认情况下,WordPress无法在文章或页面中生成或嵌入PDF文件。你必须借助插件,才可以实现WordPress创建,编辑和嵌入PDF文档。 在本文中,我们将列举适用于WordPress的最佳PDF插件,帮助你实现在WordPress网站实现PDF文档管理。…

赞(0)
未经允许不得转载:吾上云 » 使用JavaScript实现蒙版效果方法
分享到: 更多 (0)
  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

  • 阿里云
    基础型云服务器

    1核CPU

    2G内存

    40G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥89/1年 原价¥903.40

  • 阿里云
    超值型云服务器

    2核CPU

    4G内存

    40G硬盘

    3M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥899/3年 原价¥8281

  • 阿里云
    高性能云服务器

    2核CPU

    8G内存

    40G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥1399/3年¥14765

  • 腾讯云
    基础型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、个人站长类网站

    ¥95/1年 原价¥834

  • 腾讯云
    超值型云服务器

    1核CPU

    2G内存

    50G硬盘

    1M带宽

    独立IP

    分布式存储

    适合企业官网、行业门户类网站

    ¥288/3年 原价¥2502

  • 腾讯云
    高性能云服务器

    4核CPU

    8G内存

    50G硬盘

    5M带宽

    独立IP

    分布式存储

    适合电商、数据库等企业级应用

    ¥2188/3年¥13986

评论 抢沙发

评论前必须登录!

 

吾上云 专注服务器选购

购买云服务器联系我们