上图

<html>

<head>

    <title>弹出层</title>

    <style type="text/css">

        *{

            padding:0px;

            margin:0px;

        }

        .up{

            width:500px;

            height: 400px;

            border:1px solid silver;

            position: absolute;

            display: none;

            z-index: ;

            background:#fff;

/*            top:50%;

            left: 50%;*/

/*            margin-left: -250px;

            margin-top: -200px;*/

        }

        .up h2{

            background-color: #f2f2f2;

            text-align: center;

        }

        .con span{

            width:20px;

            height:30px;

            text-align: center;

            line-height: 30px;

            background-color:red;

            cursor: pointer;

        }

        .mask{

            width:3000px;

            height: 3000px;

            background:#;

            opacity: 0.3;

            position: absolute;

            top:;

            left: ;

            z-index: ;

            display:none;

        }

    </style>

</head>

<body>

    <div class="con">

        <span id="open">打开弹出层</span>

    </div>

    <div class="up" id="up">

            <h2>弹出层效果</h2>

            <span id="close">关闭</span>

    </div>

    <img src="a.jpg">

</body>

<script type="text/javascript">

//两种方式实现div居中：1：用css方式：top：50%，left：50%； margin-let:-divwidth/2 margin-top:divheight/2; 2:用js实现：获取窗口的高宽，top=（屏幕高-div高）/2,为了随时的监听浏览器的改变，需要用到浏览器事件

    window.onload=function(){

        function $(id){

            return document.getElementById(id);

        }

        //将div的位置封装在一个函数内部，直接调用

        function myDiv(){

            var mTop=(document.documentElement.clientHeight-)/;

            var mleft=(document.documentElement.clientWidth-)/;

            $("up").style.top=mTop+"px";

            $("up").style.left=mleft+"px";

        }

         myDiv();

         $("open").onclick=function(){

             $("up").style.display="block";

             mask.style.display="block";

         }

          $("close").onclick=function(){

             $("up").style.display="none";

             mask.style.display="none"

         }

         //创建一个DIV

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

         // //给这个DIV一个id和class属性

         // mask.id="mask";

         mask.className="mask";

         mask.style.width=document.documentElement.clientWidth;

         mask.style.height=document.documentElement.clientHeight;

         //将这个DIV放置到body里面--》一般是：父节点.appendChild(子节点)

         //这里注意的是absolute，要设置top和left；

         document.body.appendChild(mask); 

        //屏幕改变大小的时候，div不会自动的改变，需要添加窗口改变事件

        window.onresize=function(){

             myDiv();

             mask.style.width=document.documentElement.clientWidth;

             mask.style.height=document.documentElement.clientHeight;

        }

    }

</script>

</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. cURL的几个经典实例

    1.cURL请求的基本步骤: (1)初始化 (2)设置选项,包括URL (3)执行并获取HTML文档内容 (4)释放cURL句柄 <?php //1.初始化 $ch = curl_init(); ...

  2. ASP.NET MVC 入门系列教程

    ASP.NET MVC 入门系列教程 博客园ASP.NET MVC 技术专题 http://kb.cnblogs.com/zt/mvc/ 一个居于ASP.NET MVC Beta的系列入门文章,有朋友 ...

  3. 无论IT代码系统还是人生都是有惯性的

    是的,这和IT系统和代码没有什么关系:鸡汤式的文章,看烦了的就关掉吧,想看的请听我碎碎念.惯性本是物理学研究的问题,这里没有要研究物理学里的惯性.惯性无时无刻地发生在我们的日常生活中,只是你我都没有察 ...

  4. Python多进程（1）——subprocess与Popen()

    Python多进程方面涉及的模块主要包括: subprocess:可以在当前程序中执行其他程序或命令: mmap:提供一种基于内存的进程间通信机制: multiprocessing:提供支持多处理器技 ...

  5. BestCoder18 1002.Math Problem(hdu 5105) 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5105 题目意思:给出一个6个实数:a, b, c, d, l, r.通过在[l, r]中取数 x,使得 ...

  6. php请求URL中的参数有空格

    url=http://www.123.com/abc.php?name=ku xiong ku xiong之间有一个空格,需要替换成%20或者+ url=http://www.123.com/abc. ...

  7. 如何关闭ie9烦人的提示信息？

    ①Q:如何关闭“IE 限制活动内容”的提示? A:去掉“IE 限制活动内容”的提示: 1. 找到IE的“Internet选项”: 2. 选择“高级”选项卡: 3. 在“设置”下,找到子标题“安全”,将 ...

  8. 二、JavaScript语言--JS基础--JavaScript进阶篇--JS基础语法

    1.变量 定义:从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 命名:变量名字可以任 ...

  9. Java Hour 36 Weathre ( 9 ) struts2 – exception

    有句名言,叫做10000小时成为某一个领域的专家.姑且不辩论这句话是否正确,让我们到达10000小时的时候再回头来看吧. Hour 35 Exception Handling 直接添加全局性的异常处理 ...

  10. POJ 3461 Oulipo KMP

    题意:统计其中一个子串的出现次数 题解:即KMP算法中j==m的次数 //作者:1085422276 #include <cstdio> #include <cmath> #i ...