如何用写弹出层 ----2017-03-29

Posted 2020-09-07 茶瓶儿

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用写弹出层 ----2017-03-29相关的知识，希望对你有一定的参考价值。



<!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会在窗口或框架被调整大小时发生

以上是关于如何用写弹出层 ----2017-03-29的主要内容，如果未能解决你的问题，请参考以下文章

如何用javaScript修改comfirm提示框中按钮上的文字

使用JavaScript实现弹出层效果

弹出层或者下拉菜单被下面的层遮挡住了解决办法

layer框架弹出层

如何获取用layer弹出层表单的数据

layer的嵌套打开弹出层