js案例---弹出div窗口

原创已于 2024-06-19 11:44:21 修改 · 2.9k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #css

于 2022-12-01 17:25:18 首次发布

本文介绍了如何使用JavaScript实现弹出Div窗口的功能。通过编写CSS样式隐藏初始Div，然后利用JavaScript点击事件显示和隐藏窗口，最后展示了完整的HTML、CSS和JavaScript代码示例。

代码逻辑：

1.我们先书写div盒子的样式，并且把它隐藏

2.写一个弹出窗口的a链接，点击时弹出窗口

3.使用js点击事件，点击时显示

4.写一个关闭窗口链接，加一个点击事件，点击时隐藏窗口

先书写html、css样式：

我们有一个这样的效果：

我们先给这个a标签加一个点击事件

点击时将display从none改为block，就可以显示出来了

效果如下：

我们然后给div盒子里面的a链接加一个点击事件来关闭此窗口

完整代码如下：

<html> 
    <head> 
        <meta charset="utf-8">
        <title>点击文字弹出一个DIV层窗口代码</title> 
        <style> 
        .black_overlay{ 
            display: none; 
            position: absolute; 
            top: 0%; 
            left: 0%; 
            width: 100%; 
            height: 100%; 
            background-color: black; 
            z-index:1001; 
        } 
        .white_content { 
            display: none; 
            position: absolute; 
            top: 25%; 
            left: 25%; 
            width: 55%; 
            height: 55%; 
            padding: 20px; 
            border: 10px solid orange; 
            background-color: white; 
            z-index:1002; 
            overflow: auto; 
        } 
    </style> 
    </head> 
    <body> 
        <p>示例弹出层：<a href = "javaScript:;" class="a1">请点这里</a></p> 
        <div id="light" class="white_content">
            <a href = "javascript:;" class="a2">点这里关闭本窗口</a>
        </div> 
        <div id="fade" class="black_overlay"></div> 
    </body> 
    <script type="text/javascript">
        let a1Ele=document.querySelector(".a1")
        a1Ele.addEventListener("click",function(){
            document.getElementById('light').style.display='block';
            document.getElementById('fade').style.display='block'
        })
        let a2Ele=document.querySelector(".a2")
        a2Ele.addEventListener("click",function(){
            document.getElementById('light').style.display='none';
            document.getElementById('fade').style.display='none'
        })
    </script>
</html>