上图

  1. <html>
  2. <head>
  3.     <title>弹出层</title>
  4.     <style type="text/css">
  5.         *{
  6.             padding:0px;
  7.             margin:0px;
  8.         }
  9.         .up{
  10.             width:500px;
  11.             height: 400px;
  12.             border:1px solid silver;
  13.             position: absolute;
  14.             display: none;
  15.             z-index: ;
  16.             background:#fff;
  17. /*            top:50%;
  18.             left: 50%;*/
  19. /*            margin-left: -250px;
  20.             margin-top: -200px;*/
  21.         }
  22.         .up h2{
  23.             background-color: #f2f2f2;
  24.             text-align: center;
  25.         }
  26.         .con span{
  27.             width:20px;
  28.             height:30px;
  29.             text-align: center;
  30.             line-height: 30px;
  31.             background-color:red;
  32.             cursor: pointer;
  33.         }
  34.         .mask{
  35.             width:3000px;
  36.             height: 3000px;
  37.             background:#;
  38.             opacity: 0.3;
  39.             position: absolute;
  40.             top:;
  41.             left: ;
  42.             z-index: ;
  43.             display:none;
  44.         }
  45.     </style>
  46. </head>
  47. <body>
  48.     <div class="con">
  49.         <span id="open">打开弹出层</span>
  50.     </div>
  51.     <div class="up" id="up">
  52.             <h2>弹出层效果</h2>
  53.             <span id="close">关闭</span>
  54.     </div>
  55.     <img src="a.jpg">
  56.  
  57. </body>
  58. <script type="text/javascript">
  59. //两种方式实现div居中：1：用css方式：top：50%，left：50%； margin-let:-divwidth/2 margin-top:divheight/2; 2:用js实现：获取窗口的高宽，top=（屏幕高-div高）/2,为了随时的监听浏览器的改变，需要用到浏览器事件
  60.  
  61.     window.onload=function(){
  62.         function $(id){
  63.             return document.getElementById(id);
  64.         }
  65.         //将div的位置封装在一个函数内部，直接调用
  66.         function myDiv(){
  67.             var mTop=(document.documentElement.clientHeight-)/;
  68.             var mleft=(document.documentElement.clientWidth-)/;
  69.             $("up").style.top=mTop+"px";
  70.             $("up").style.left=mleft+"px";
  71.         }
  72.          myDiv();
  73.          $("open").onclick=function(){
  74.              $("up").style.display="block";
  75.              mask.style.display="block";
  76.  
  77.          }
  78.           $("close").onclick=function(){
  79.              $("up").style.display="none";
  80.              mask.style.display="none"
  81.          }
  82.          //创建一个DIV
  83.          var mask=document.createElement("div");
  84.          // //给这个DIV一个id和class属性
  85.          // mask.id="mask";
  86.          mask.className="mask";
  87.          mask.style.width=document.documentElement.clientWidth;
  88.          mask.style.height=document.documentElement.clientHeight;
  89.          //将这个DIV放置到body里面--》一般是：父节点.appendChild(子节点)
  90.          //这里注意的是absolute，要设置top和left；
  91.          document.body.appendChild(mask); 
  92.  
  93.         //屏幕改变大小的时候，div不会自动的改变，需要添加窗口改变事件
  94.         window.onresize=function(){
  95.              myDiv();
  96.              mask.style.width=document.documentElement.clientWidth;
  97.              mask.style.height=document.documentElement.clientHeight;
  98.         }
  99.     }
  100. </script>
  101. </html>

JS来添加弹出层，并且完成锁屏的更多相关文章

  1. js进阶 11-20 弹出层如何制作

    js进阶 11-20 弹出层如何制作 一.总结 一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好 ...

  2. 在vue中继续使用layer.js来做弹出层---切图网

    layer.js是一个方便的弹出层插件,切图网专注于PSD2HTML等前端切图多年,后转向Vue开发.在vue开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导 ...

  3. js漂亮的弹出层

    1.漂亮的弹出层----artDialog http://aui.github.io/artDialog/ 2.弹出层 ------layer http://sentsin.com/jquery/la ...

  4. DIV JS CSS 轻量级弹出层 兼容各浏览器

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

  5. （三）原生JS实现 - 插件 - 弹出层

    创建遮罩层 _createCover: function() { var newMask = document.createElement("div"); newMask.id = ...

  6. JS简易弹出层

    目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹 ...

  7. JS弹出层遮罩,隐藏背景页面滚动条细节优化

    做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容. 一.去除滚动条方法给body添加ove ...

  8. 简单 JS 弹出层 背景变暗

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

  9. 弹出层layer演示 以及在编写弹出层时遇到的错误

    实现的功能: 首先第一步 在官方下载layer的文件.layUI官网:http://layer.layui.com/     http://layer.layui.com/ layer文件的下载步骤如 ...

随机推荐

  1. Spring面试题集

    一.Spring简介       *  Spring框架有哪几部分组成? Spring框架有七个模块组成组成,这7个模块(或组件)均可以单独存在,也可以与其它一个或多个模块联合使用,主要功能表现如下: ...

  2. HTML表单元素登陆界面

    <form action="" method="post" name="myform"><p>E-mail:< ...

  3. iOS 基于UIWebView的应用特点

    现在有许多ios应用都是基于UIWebView的应用,比如phonegap做出的那些程序.最近我也接触到了一个类似的程序,今天在这里分享一下这类程序的特点. 用UIWebView来实现程序,自然少不了 ...

  4. maven的一些依赖

    maven的一些依赖: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://w ...

  5. mybatis There is no getter for property named 'xx' in 'class java.lang.String

    转载自://http://www.cnblogs.com/anee/p/3324140.html 用mybatis查询时,传入一个字符串传参数,且进行判断时,会报 There is no getter ...

  6. java equals 和 "==" 比较

    java中的数据类型,可分为两类: 1.基本数据类型,也称原始数据类型.byte,short,char,int,long,float,double,boolean   他们之间的比较,应用双等号(== ...

  7. iptables 开启3306端口

    [root@mysqld ~]# mysql -uroot -h 192.168.1.35 -p Enter password: ERROR 1130 (HY000): Host '192.168.1 ...

  8. SQL中行列转换Pivot

    --建表 ),课程 ),分数 int) --插入数据 ) ) ) ) ) ) 1.静态行转列(确定有哪些列) select 姓名, end)语文, end)数学, end)物理 from tb gro ...

  9. 滚屏加载--jQuery+PHP实现浏览更多内容

    滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其实 ...

  10. hdu 1281 二分图匹配

    题目:在保证尽量多的“车”的前提下,棋盘里有些格子是可以避开的,也就是说,不在这些格子上放车,也可以保证尽量多的“车”被放下.但是某些格子若不放子,就 无法保证放尽量多的“车”,这样的格子被称做重要点 ...