<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            *{

                margin: 0px;

                padding: 0px;

            }

            .mask{

                width: 100%;

            /*    height: 800px;*/

                z-index: 998;

                background-color: lightslategrey;

                opacity: 0.5;

                position: absolute;

                top: 0px;

                left: 0px;

            }

            .login{

                height: 300px;

                width: 400px;

                background-color: greenyellow;

                position: fixed;          /*不能设置为relative;否则登录框位置会移动  */

                /*left: 100px;

                top: 40px;*/

                z-index: 999;                 /*设置显示先后顺序*/

            }

            .close-btn{

                height: 30px;

                width: 30px;

                text-align: center;

                vertical-align: middle;

                line-height: 30px;

                position: absolute;

                right: 10px;

                top: 10px;

                border: 1px solid black;

                font-size: 25px;

            }

        </style>

    </head>

    <body>

        <input type="button" value="登录"  onclick="showLogin()"/>

    <!--    <div class="mask"></div>-->

        <!--<div class="login">

            <div class="close-btn">X</div>

        </div>-->

            <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>

    </body>

</html>

<script>

    function showLogin(){

        var bodyheight=document.body.clientHeight;  //获取body高度

        var mask=document.createElement("div");    //创建一个div

        mask.className="mask";

        mask.style.height=bodyheight+"px";    //获取mask的高度，必须从style中获取

        document.body.appendChild(mask);    //显示遮罩层

        mask.onclick = function(){          // 作用：点击遮罩层关闭

            mask.remove();

            login.remove();

            }

        var lwidth=document.documentElement.clientWidth;

        var lheight=document.documentElement.clientHeight;

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

        login.className="login";

        login.style.left=lwidth/2 - 200+"px";

        login.style.top=lheight/2 - 150+"px";

        login.innerHTML="<div class='close-btn'>X</div>";  //必须是html,text读不出样式

        document.body.appendChild(login);

        document.getElementsByClassName("close-btn")[0].onclick = function(){

            mask.remove();

            login.remove();                     //作用：点击X关闭

        }

    }

     document.body.onresize = function(){        //作用：设置登录框随窗体大小变化

        var clientHeight = document.documentElement.clientHeight;

        var clientWidth = document.documentElement.clientWidth;

        var login = document.getElementsByClassName("login")[0];

        login.style.left = clientWidth/2 - 200 + "px";

        login.style.top = clientHeight/2 - 150 + "px";

    }

</script>
重点：
1、利用DOM创建新的DIV,获取所需要的高度和宽度；
2、有关js的高度问题看下一篇博客。
3、z-index; className; onresize会在窗口或框架被调整大小时发生

如何用写js弹出层 ----2017-03-29的更多相关文章

  1. js弹出层

    js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层 表单提交后遮住页面,等 ...

  2. jquery.blockUI.2.31.js 弹出层项目介绍

    {insert_scripts files='user.js'} <style type="text/css"> #float_login{border:1px sol ...

  3. js 弹出层，以及在javascript里定义层样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  5. 在Vue中使用layer.js弹出层插件

    layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...

  6. JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  7. Js弹出层，弹出框代码

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

  8. div+js 弹出层

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. JS 弹出层 定位至屏幕居中

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

随机推荐

  1. [转]C#使用Window图片查看器打开图片

    //建立新的系统进程 System.Diagnostics.Process process = new System.Diagnostics.Process(); //设置文件名,此处为图片的真实路径 ...

  2. Unity3d Vector3

    using UnityEngine; using System.Collections; public class test : MonoBehaviour { void Start () { Vec ...

  3. Linux强行踢用户

    首先who执行查看有几个终端在链接使用系统.如要踢出tty2 方法1: pkill -9 -t tty2 方法2: fuser -k /dev/tty2 fuser 指令 用途 使用文件或文件结构识别 ...

  4. 企业级任务调度框架Quartz(2)-下载和安装Quartz

    1.下载和安装 Quartz 根据资料上提供的网址http://www.opensymphony.com/quartz 我们可以下载到Quartz的最新版本1.6.4: 2.下载后包的说明       ...

  5. 三维地图中的A*寻路

    跟二维地图原理一样,只不过搜索方向多了,二维只搜8个方向,而三维要搜26个方向. 不懂的看我以前写的文章,这里直接贴代码: #include <iostream> #include < ...

  6. DAO DTO VO BO

    DAO叫数据访问对象DTO是数据传输对象DAO通常是将非对象数据(如关系数据库中的数据)以对象的方式操纵.DTO通常用于不同层(UI层.服务层或者域模型层)直接的数据传输,以隔离不同层,降低层间耦合 ...

  7. javascript事件列表解说

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  8. Tab切换效果（修改）

    前几天我写了这个切换效果,但是是只传一个值的函数,经过各位大牛的指点发现还是有些问题的,于是经过我不懈的努力,完善了代码: 传递多个参数替代函数里面包含事件这个问题: html代码: <div ...

  9. 把SQLAlchemy查询对象转换成字典/json使用(分开)

    注:针对的是查询出来的是单条对象 多个对象的话可以使用for循环遍历查询出来的对象列表,也可以使用下面的方法 1.config.py文件 #!/usr/bin/env python #-*- codi ...

  10. 朴素贝叶斯(Naive Bayesian)

    简介 Naive Bayesian算法 也叫朴素贝叶斯算法(或者称为傻瓜式贝叶斯分类) 朴素(傻瓜):特征条件独立假设 贝叶斯:基于贝叶斯定理 这个算法确实十分朴素(傻瓜),属于监督学习,它是一个常用 ...