javaScript实现弹出层效果

最新推荐文章于 2017-10-13 17:36:00 发布

置顶王大锤子呦

最新推荐文章于 2017-10-13 17:36:00 发布

阅读量1.1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 弹出层

本文链接：https://blog.csdn.net/darongzi1314/article/details/52683689

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹出层</title>
    <link rel="stylesheet" href="css/reset.css" type="text/css">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .main{
            width: 100%;
            height: 1000px;
            /*margin: 0 auto;*/
            background: cyan;
            color: white;
        }
        #mask{
            background: #000;
            opacity: 0.75;
            /*兼容IE*/
            filter: alpha(opacity=75);
            height: 1000px;
            width: 100%;
            /*绝对定位*/
            position: absolute;
            left: 0;
            top:0;
            /*设置层级最大*/
            z-index: 1000;
        }
        #login{
            /*静止定位*/
            position: fixed;
            left: 30%;
            top:30%;
            /*设置层级最大*/
            z-index: 1001;
        }
        .loginCon{
            width: 670px;
            height: 380px;
            background: url("image/loginBg.png")no-repeat;
            position: relative;
        }
        #close{
            width: 30px;
            height: 30px;
            background: url("image/close.png")no-repeat;
            cursor: pointer;
            position: absolute;
            right: 0;
            top:0;
        }
        #btnLogin{
            background: #c9394a;
            width: 100px;
            height: 40px;
            color: white;
        }
    </style>
</head>
<body>
<div class="main">
    <div id="btnLogin">
        点击按钮显示弹出层
    </div>
</div>
<!--<div class="" id="mask">-->

<!--</div>-->
<!--<div id="login">-->
    <!--<div class="loginCon">-->
        <!--<div id="close">-->

        <!--</div>-->
    <!--</div>-->
</div>
<script type="text/javascript">

    function openNew() {
        //创建元素节点
        var oMask=createDiv();
        //设置id
        oMask.id="mask";
        //获取页面的高度和宽度
        var sHeight=document.documentElement.scrollHeight;
        var sWidth=document.documentElement.scrollWidth;
        oMask.style.height=sHeight+'px';
        oMask.style.width=sWidth+'px';
        //插入到文档中
        document.body.appendChild(oMask);

        var oLogin=createDiv();
        oLogin.id="login";
        //获取可视区域的宽度和高度
        var wHeight=document.documentElement.clientHeight;
        //如果页面是竖向的那么可视区域的宽度和页面的宽度是一样的
        //var wWidth=document.documentElement.clientWidth;
        document.body.appendChild(oLogin);
        oLogin.innerHTML="<div class='loginCon'><div id='close'></div></div>";

        //获取元素的宽度和高度
        var doLoginH=oLogin.offsetHeight;
        var doLoginW=oLogin.offsetWidth;

        var left=(sWidth-doLoginW)/2;
        var top=(wHeight-doLoginH)/2

        oLogin.style.left=left+'px';
        oLogin.style.top=top+'px';

        var oClose=getDOM("close");
        oMask.onclick=oClose.onclick=function () {
            //删除子节点
            document.body.removeChild(oMask);
            document.body.removeChild(oLogin);
        }
    }
    window.onload=function () {

        var oBtn=getDOM("btnLogin");

        //点击登录按钮,弹出弹出层
        oBtn.onclick=function () {
            openNew();
        }
    }
    function getDOM(id) {
        return document.getElementById(id);
    }
    function createDiv() {
        return document.createElement("div");
    }
</script>
</body>
</html>

王大锤子呦

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javaScript实现弹出层效果

html lang="en">head> meta charset="UTF-8"> title>弹出层title> link rel="stylesheet" href="css/reset.css" type="text/css"> style type="text/css"> *{ padding: 0;
复制链接

扫一扫

专栏目录