最近纠结于遮罩层和弹出层的实现，终于搞定了个简单的版本。示例和代码如下，点击按钮可以看到效果：

1.示例:

2.代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

       <head>

               <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

              <title>遮罩层和弹出层简单实现</title>

              <script type="text/javascript">

                  function show() {

                      var div = document.createElement("div");

                      var div_show = document.getElementById("div_show");

                      div.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";

                      div.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";

                      div.style.backgroundColor = "#000000";

                      div.style.position = "absolute";

                      div.style.opacity = 0.5;

                      div.style.left = 0;

                      div.style.top = 0;

                      div.id = "zhebiceng";

                      div.style.zIndex = 100;

                      top.document.getElementById("div_body").appendChild(div);

                      div_show.style.display = "block";

                  }

                  function play_show() {

                      var div = top.document.getElementById("zhebiceng");

                      var div_show = document.getElementById("div_show");

                      div_show.style.display = "none";

                      div.style.display = "none";

                      div.parentNode.removeChild(div);

                  }

              </script>

       </head>

       <body>

       <div id="div_body">

       <input type="button" value="click" onclick="show()" />

       </div>

        <div id="div_show" style=" background:white;display: none;height: 400px;left: 80px;  position: fixed;top: 88px; width: 80%;z-index: 99999;">

       <input type="button" value="关闭" onclick="play_show();" style="float: right;" />

       </div>

       </body>

</html>

【Javascript Demo】遮罩层和弹出层简单实现的更多相关文章

  1. 【Javascript Demo】谷歌地图简单实现（附遮罩层和弹出层实现）

    虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...

  2. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

  3. js特效遮罩层（弹出层）

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. bootstrap弹出层嵌套弹出层后文本框不能获得焦点输入

    如图上 我从页面打开一个bootstrap弹出层 然后又在 bootstrap弹出层的基础上打开一个layui的弹出层  打开后发现文本域获取不到焦点不能输入内容 而该弹出层显示的层级体现出来了 按钮 ...

  5. element-ui 弹出组件的遮罩层在弹出层dialog模态框的上面

     造成的原因: 因为dialog的组件外层div设置了 position:absolute: 属性所以导致遮罩层会在最上面. 解决方法: 在属性内加上这段代码 :append-to-body=&quo ...

  6. element ui 弹出组件的遮罩层在弹出层的上面的解决方法

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-bo ...

  7. 【Javascript Demo】遮罩层和百度地图弹出层简单实现

    其实想做的就是显示百度地图的弹出层,现在已经简单实现了.示例和代码如下,点击按钮可以看到效果: 1.示例:   2.代码: <!DOCTYPE html PUBLIC "-//W3C/ ...

  8. javascript实现掉落弹出层------Day29

    顾名思义.所谓"掉落弹出层".就是出现一个弹出层,而出现的位置是从上方向下掉落.掉落到指定的位置停止,这样分析起来.和"右下角弹出提醒对话框"比起来,确有异曲同 ...

  9. div滚动条弹出层效果 （所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

随机推荐

  1. 【Python3】【树形dp】uva10253 Series-Parallel Networks

    设“共n个叶子,且每个非叶节点至少有两个子节点”的树的数量为f[n],再乘2就是本题答案. 设状态d(i,j)表示每棵子树最多包含i个叶子.一共有j个叶子的树的个数.于是f(n)=d(n-1,n).假 ...

  2. shell十三问？

    shell 十三问: 1) 为何叫做 shell ?  2) shell prompt(PS1) 与 Carriage Return(CR) 的关系?  3) 别人 echo.你也 echo ,是问 ...

  3. java的反射机制(第二篇）

    本文转载自:http://c.biancheng.net/cpp/html/1781.html 要理解RTTI在Java中的工作原理,首先必须知道类型信息在运行时是如何表示的,这项工作是由“Class ...

  4. IDEA JSP项目构建及学习心得

    近期学习的东西比较杂乱,导致了很多东西都有些忘却.在这里记录一份心得. 简而言之JSP也就是Java代码在页面上的一种呈现方式,用于Web项目的前台展示. 在这里不做过多的阐述. MVC设计模式,Se ...

  5. C#高级编程9 第14章 内存管理和指针

    C#高级编程9 内存管理和指针 后台内存管理 1) 值数据类型 在处理器的虚拟内存中有一个区域,称为栈,栈存储变量的浅副本数据,通过进入变量的作用域划分区域,通过离开变量的作用域释放. 栈的指针指向栈 ...

  6. SpringMVC 方法参数设置

    /** 在方法中配置参数: (1) 内置对象配置: request:获取cookie.请求头... 获取项目根路径 request.getContextPath() response:用于ajax的输 ...

  7. 华为S5300系列交换机V100R005SPH008热补丁

    S23_33_53-V100R005SPH008.pat 附件: 链接:https://pan.baidu.com/s/1XfIQ55g5pWI9aqmM7LHUew  密码:f2mu

  8. 电感式升压转换器-AIC1896 电感式升压转换器

    电感式升压转换器-AIC1896 AIC1896是一个脉冲宽度调变(Pulse-Width-Modulation;PWM)控制之升压型转换器,它可以提供一个定电流以驱动白光LED. (图五A)为升压转 ...

  9. SpringMVC怎么获取前台传来的数组

    var tollerlist = new Array(); for(var k in objToller){ tollerlist.push(k); } $.ajax({ type:"pos ...

  10. PL/SQL的下载与安装

    注意,为了更好的通用性,最好安装32位的. 下载地址为:https://www.allroundautomations.com/bodyplsqldevreg.html 当前最新正式版本为PL/SQL ...