上图

<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. Master-Worker模式

    并行程序设计模式--Master-Worker模式 简介 Master-Worker模式是常用的并行设计模式.它的核心思想是,系统有两个进程协议工作:Master进程和Worker进程.Master进 ...

  2. 《ASP.NET MVC4 WEB编程》学习笔记------Web API

    本文截取自情缘 1. Web API简单说明 近来很多大型的平台都公开了Web API.比如百度地图 Web API,做过地图相关的人都熟悉.公开服务这种方式可以使它易于与各种各样的设备和客户端平台集 ...

  3. 【JAVA、C++】LeetCode 016 3Sum Closest

    Given an array S of n integers, find three integers in S such that the sum is closest to a given num ...

  4. DP:Multiplication Puzzle(POJ 1651)

    卡片游戏 题目大意:给你一排卡片,你可以从从中抽一些卡片(但是不能抽最左和最右的卡片),每张卡片上有一个数字,当你从中抽出一张卡片后,你将得卡片的数字和卡片左右两张卡片的数字的乘积的分数,问当剩下最左 ...

  5. codeforces A. Strange Addition 解题报告

    题目链接:http://codeforces.com/problemset/problem/305/A 题目意思:给出一个序列,需要从中选择一些数,这些数需要满足:任意的两个数中每一位至少有一个数满足 ...

  6. Servlet之Cookie操作

    Java对cookie的操作比较简单,主要介绍下建立cookie和读取cookie,以及如何设定cookie的生命周期和cookie的路径问题. 1,建立一个无生命周期的cookie,即随着浏览器的关 ...

  7. HTML5学习记录1-新特性

    新特性 HTML5 中的一些有趣的新特性: 1. 用于绘画的 canvas 元素 2. 用于媒介回放的 video 和 audio 元素 3. 对本地离线存储的更好的支持 4. 新的特殊内容元素,比如 ...

  8. myeclipse2013和以后版本破解

    当你下到最新版的myeclipse-blue的时候你是否会为注册激活而烦恼呢,别担心,其实激活也就那么点事儿,请遵循我如下做法就可以了: 1.运行jdk下面的cracker.jar文件来打开生成活跃码 ...

  9. RocketMQ最佳实践

    1.RocketMQ中的专业术语 Topic topic表示消息的第一级类型,比如一个电商系统的消息可以分为:交易消息.物流消息...... 一条消息必须有一个Topic. Tag Tag表示消息的第 ...

  10. Windows中检测当前是否有窗口全屏

    不时看到有人问起如何判断当前是否有窗口正处于全屏状态? 不过, 在解决这个问题之前先来解决一个简单的问题?         什么是全屏?     相当一部分人认为: 窗口如果是最大化的, 那么它就是最 ...