模拟弹出框遮罩层

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>qdabc.cn</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .main{
                height: 1000px;
                background: cadetblue;
            }
            #mask{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 800px;
                background: #000;
                opacity: .75;
            }
            #login{
                position: fixed;
                left: 30%;
                top: 30%;
            }
            .content{
                width: 300px;
                height: 300px;
                background: white;
                position: relative;
            }
            .close{
                width: 30px;
                height: 30px;
                background: yellowgreen;
                position: absolute;
                right: 5px;
                top: 5px;
                text-align: center;
                line-height: 30px;
                color: white;
                font-weight: bold;
            }
            #button{
                width: 100px;
                height: 30px;
                background: brown;
                position: absolute;
                right: 50px;
                top: 10px;
                line-height: 30px;
                text-align: center;
                color: white;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div class="main" id="main">
            <div id="button">点击弹出</div>
            <!--<div class="mask"></div>
            <div class="login">
                <div class="content">
                    <div class="close"></div>
                </div>
            </div>-->
        </div>
        <script>
            function aaa(){
                var oMain=document.getElementById('main');
                var sHeight=document.documentElement.scrollHeight; //这个值赋给mask高
                var sWidth=document.documentElement.scrollWidth;
                var cHeight=document.documentElement.clientHeight;
                var cWidth=document.documentElement.clientWidth;
                var oMask=document.createElement('div');
                oMask.id='mask';
                oMask.style.height=sHeight+'px';
                oMask.style.width=sWidth+'px';
                oMain.appendChild(oMask);
                var oLogin=document.createElement('div');
                oLogin.id='login';
                oLogin.innerHTML='<div class="content"><div class="close" id="close">X</div></div>';
                oMain.appendChild(oLogin);
                var offHeight=oLogin.offsetHeight;
                var offWidth=oLogin.offsetWidth;
                oLogin.style.top=(cHeight-offHeight)/2+'px';
                oLogin.style.left=(sWidth-offWidth)/2+'px';
                var oClose=document.getElementById('close');
                oMask.onclick=oClose.onclick=function(){
                    oMain.removeChild(oMask);
                    oMain.removeChild(oLogin);
                }
            }
            var oBtn=document.getElementById('button');
            oBtn.onclick=aaa;
        </script>
    </body>
</html>

欢迎分享本文,转载请保留出处:前端ABC » 模拟弹出框遮罩层

赞 (1)
分享到:更多 ()

发表评论 0