上图

<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. linux dd命令实用详解

    linux dd命令刻录启动U盘详解 dd命令做usb启动盘十分方便,只须:sudo dd if=xxx.iso of=/dev/sdb bs=1M 用以上命令前必须卸载u盘,sdb是你的u盘,bs= ...

  2. 每天一个命令day1【diff 命令】(具体实例看下一节)

    diff 命令是 linux上非常重要的工具,用于比较文件的内容,特别是比较两个版本不同的文件以找到改动的地方.diff在命令行中打印每一个行的改动.最新版本的diff还支持二进制文件.diff程序的 ...

  3. 【Hibernate】Hibernate系列3之配置文件详解

    配置文件详解 3.1.配置文件 连接池性能优化:http://www.cnblogs.com/xdp-gacl/p/4002804.html

  4. JavaScript String 对象方法

    String 对象方法 方法 描述 anchor() 创建 HTML 锚. big() 用大号字体显示字符串. blink() 显示闪动字符串. bold() 使用粗体显示字符串. charAt() ...

  5. windows下bat批处理实现守护进程

    本文转自网络,由于找不到原作者,因而无法知道出处.如果有幸让原作者看到,请联系我加上.先转载至此. 最近几天加班加疯掉了,天天晚上没法睡.开发部的一个核心程序总是会自己宕机,然后需要手工去起,而这个服 ...

  6. iOS 端的第三方语音识别库

    最近在看语音识别方面的库,主要看了2个收费的项目,一个是 At&t 的,一个是Nuance的.这2个项目虽然是收费的,但是仅仅测试的话,是免费的,连接如下 https://developer. ...

  7. iOS 用CALayer实现动画

    与动画有关的几个类的继承关系 涉及到动画的类主要有6个,看一下它们的基本用途: 1. CAAnimation  动画基类 2. CAAnimationGroup 组合多个动画 3. CAPropert ...

  8. PHP+redis实现超迷你全文检索

    2014年10月31日 11:45:39 情景: 我们平台有好多游戏, 运营的同事在查询某一款游戏的时候, 目前使用的是html的select下拉列表的展现形式, 运营的同事得一个个去找,然后选中,耗 ...

  9. Java中必须了解的常用类

    1.Java的包装类 基本数据类型我们都很熟悉,例如:int.float.double.boolean.char等,基本数据类型不具备对象的特征,不能调用方法,一般能实现的功能比较简单,为了让基本数据 ...

  10. hdu 1232 畅通工程 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1232 并查集入门题.最近在学并查集,它无非包括三个操作:make_set(x).union_set(x ...