【JavaScript】简单实现弹出窗口div

JavaScript实现弹出窗口思路总体使用两个div，一个作为底层展示，一个做为弹出窗口；两个窗口独立进行CSS设计，通过display属性进行设置现实与隐藏，此处建议使用display属性而不是visibility属性，visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，影响布局；在js内设计两个onclick事件，分别指定函数，分别为开启弹窗和关闭

小子挺不错

19858人浏览 · 2020-12-08 22:20:15

小子挺不错 · 2020-12-08 22:20:15 发布

JavaScript实现弹出窗口

思路

总体使用两个div，一个作为底层展示，一个做为弹出窗口；
两个窗口独立进行CSS设计，通过display属性进行设置显示与隐藏，此处建议使用display属性而不是visibility属性，visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，影响布局；
在js内设计两个onclick事件，分别指定函数，分别为开启弹窗和关闭弹窗。

一、设置两个div

<html>
<title>弹出窗口</title>
<head>
    <meta charset="UTF-8">
</head>
<body>
	// 底层div
    <div id="popLayer">
    </div>
	// 弹出层div
    <div id="popDiv">
    </div>
</body>
</html>

二、对两个div进行独立CSS设置，弹出窗口display设为none

<html>
<title>弹出窗口</title>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        body{
            background-color: cyan;
        }
        #popDiv{
            display: none;
            background-color: crimson;
            z-index: 11;
            width: 600px;
            height: 600px;
            position:fixed;
            top:0;
            right:0;
            left:0;
            bottom:0;
            margin:auto;
        }
    </style>
</head>
<body>
	// 底层div
    <div id="popLayer">
        <button onclick="">弹窗</button>
    </div>
	
	// 弹出层div
    <div id="popDiv">
        <div class="close">
        	// 关闭按钮超链接
            <a href="" onclick="">关闭</a>
        </div>
            <p>此处为弹出窗口</p>
    </div>
</body>
</html>

三、定义并设置弹出按钮和关闭窗口函数

<script type="text/javascript">
        function popDiv(){
            // 通过唯一id值获取div元素
            var popBox = document.getElementById("popDiv");
            var popLayer = document.getElementById("popLayer");

            // 控制两个div的显示与隐藏
            popBox.style.display = "block";
            popLayer.style.display = "block";
        }

        function closePop(){
            // 通过唯一id值获取弹出窗口元素
            let popDiv = document.getElementById("popDiv");

            popDiv.style.display = "none";
        }
</script>

四、将函数设置到onclick事件中

<button onclick="popDiv();">弹窗</button>
<a href="javascript:void(0)" onclick="closePop()">关闭</a>

五、设置关闭链接CSS和pop界面的其余CSS

<style type="text/css">
        /* 关闭链接样式 */
        #popDiv .close a {
        /* 设置字体颜色 */
            color: #2D2C3B;
        }
        /* 弹出界面的关闭链接 */
        #popDiv .close{
        	/* 设置文本靠右显示，也就是关闭按钮显示在右边 */
            text-align: right;
            margin-right: 5px;
            /* 背景颜色 */
            background-color: #F8F8F8;
        }
        #popDiv p{
        	/* 设置文本居中显示，这里显示的就是弹出窗口的内容，可以自行设置 */
            text-align: center;
            /* 设置字体大小和宽度 */
            font-size: 25px;
            font-weight: bold;
        }
    </style>

六、整体代码

<html>
<title>弹出窗口</title>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function popDiv(){
            // 获取div元素
            var popBox = document.getElementById("popDiv");
            var popLayer = document.getElementById("popLayer");

            // 控制两个div的显示与隐藏
            popBox.style.display = "block";
            popLayer.style.display = "block";
        }

        function closePop(){
            // 获取弹出窗口元素
            let popDiv = document.getElementById("popDiv");

            popDiv.style.display = "none";
        }
    </script>
    <style type="text/css">
        body{
            background-color: cyan;
        }
        #popDiv{
            display: none;
            background-color: crimson;
            z-index: 11;
            width: 600px;
            height: 600px;
            position:fixed;
            top:0;
            right:0;
            left:0;
            bottom:0;
            margin:auto;
        }
        /* 关闭按钮样式 */
        #popDiv .close a {
            text-decoration: none;
            color: #2D2C3B;
        }
        /* 弹出界面的关闭按钮 */
        #popDiv .close{
            text-align: right;
            margin-right: 5px;
            background-color: #F8F8F8;
        }
        #popDiv p{
            text-align: center;
            font-size: 25px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="popLayer">
        <button onclick="popDiv();">弹窗</button>
    </div>

    <div id="popDiv">
        <div class="close">
            <a href="javascript:void(0)" onclick="closePop()">关闭</a>
        </div>
            <p>此处为弹出窗口</p>
    </div>
</body>
</html>

AtomGit 开源协作平台测评赛

瓜分20万奖金获得内推名额丰厚实物奖励易参与易上手

更多推荐

【Spring Boot 】Spring Boot + HikariCP 连接池使用示例

文章目录示例工具版本HikariCP 依赖HikariCP 配置1. connectionTimeout2. minimumIdle3. maximumPoolSize4. idleTimeout5. maxLifetime6. autoCommitSpring Boot Data + HikariCP + MySQL示例测试应用程序1. 使用 Maven 命令2. 使用 Eclipse3. 使用