上图

<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. mysql sql维护常用命令

    mysql修改表名,列名,列类型,添加表列,删除表列 alter table test rename test1; --修改表名 alter table test add  column name v ...

  2. ecshop设置一个子类对应多个父类并指定跳转url的修改方法

    这是一篇记录在日记里面的技术文档,其实是对ecshop的二次开发.主要作用是将一个子类对应多个父类,并指定条跳转url的功能.ecshop是一款在线购物网站,感兴趣的可以下载源码看看.我们看看具体是怎 ...

  3. 利用 Chromium Embedded Framework (CEF) 定制提取 Flash 视频的浏览器

    功能介绍: 利用 CEF 分析网页源码, 提取 flash 视频的代码. 提取的视频代码 LoadString 和 JS 两种方式重新插入到浏览器. (CEF_3.2171.1979_win32 - ...

  4. VS禁止特定警告

    项目右键-属性-配置属性-C/C++-高级-禁用特定警告-填写警告编号例如4996

  5. cVim—Chrome上更强大的vim插件

    cVim——Chrome上更强大的vim插件 介绍 也许很多人在chrome上都用过类似Vimium, ViChrome的插件,这些插件的目的都差不多,就是在浏览器中提供一些类似vim的操作来提高效率 ...

  6. Android之canvas详解

    首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, y ...

  7. Rap 安装和配置

    本机环境 系统:CentOS 6.7 64 位 MySQL 5.6 JDK 1.8 Tomcat 8 Redis 3.0.7 Rap 0.14.1 Rap 说明 官网:https://github.c ...

  8. jar包和war包的区别

    jar包和war包的区别: jar包就是别人已经写好的一些类,然后将这些类进行打包,你可以将这些jar包引入你的项目中,然后就可以直接使用这些jar包中的类和属性了,这些jar包一般都会放在lib目录 ...

  9. JS生成某个范围的随机数（四种情况）

    前言: JS没有现成的函数,能够直接生成指定范围的随机数. 但是它有个函数:Math.random()  这个函数可以生成 [0,1) 的一个随机数. 利用它,我们就可以生成指定范围内的随机数. 而涉 ...

  10. 第六步：Lucene查询索引（优化一）

    package cn.harmel.lucene; import java.io.IOException; import java.nio.file.Paths; import org.apache. ...