html+css+js实现简单的弹窗

偏执的太偏执、 2022-11-29 11:42 155阅读 0赞

// 代码
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>div+css+js实现弹出框</title>
        <style>
            /*背景层*/
            #popLayer { 
                display: none;
                background-color: #B3B3B3;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 10;
                -moz-opacity: 0.8;
                opacity:.80;
                filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */
            }
     
            /*弹出层*/
            #popBox { 
                display: none;
                background-color: #FFFFFF;
                z-index: 11;
                width: 200px;
                height: 200px;
                position:absolute;
                top:0;
                right:0;
                left:0;
                bottom:0;
                margin:auto;
            }
     
            #popBox .close{ 
                text-align: right;
                margin-right: 5px;
                background-color: #F8F8F8;
            }
     
            /*关闭按钮*/
            #popBox .close a { 
                text-decoration: none;
                color: #2D2C3B;
            }
     
        </style>
    </head>
    <body>
    <input type="button" name="popBox" value="弹出框" onclick="popBox()">
    <div id="popLayer">我是背景层</div>
    <div id="popBox">
        <div class="close">
            <a href="javascript:void(0)" onclick="closeBox()">关闭</a>
        </div>
        <div class="content">我是弹出层</div>
    </div>
    <script>
        /*点击弹出按钮*/
        function popBox() { 
            var popBox = document.getElementById("popBox");
            var popLayer = document.getElementById("popLayer");
            popBox.style.display = "block";
            popLayer.style.display = "block";
        };
     
        /*点击关闭按钮*/
        function closeBox() { 
            var popBox = document.getElementById("popBox");
            var popLayer = document.getElementById("popLayer");
            popBox.style.display = "none";
            popLayer.style.display = "none";
        }
    
    </script>
    </body>
    </html>

实现原理：在原页面的基础上添加两个div，一个是弹出层，一个是遮罩层，即背景层。这两个div和原始页面是在一个文件中，首先通过设置display：none;让这两个div不显示，然后通过给弹出框按钮和关闭按钮绑定事件来实现弹出框的显示和隐藏；然后通过z-index实现层级分布。

实现弹出层的垂直水平居中的两种方法：

/* 1、div使用绝对布局，设置 margin:auto; 并设置 top、left、right、bottom 的值相等即可，不一定要都是0 */
    .center{ 
        text-align: center; /*让div内部文字居中*/
        background-color: #fff;
        border-radius: 20px;
        width: 300px;
        height: 350px;
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

/* 2、绝对布局，让left和top都是50%，再用transform向左（上）平移它自己宽度（高度）的50% */
    .center{ 
        text-align: center;
        background-color: #fff;
        border-radius: 20px;
        width: 300px;
        height: 350px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }

转载:https://blog.csdn.net/weixin\_37580235/article/details/82291028