首页点击事件弹出div窗口

点击事件弹出div窗口

时间: 2023-08-26 10:07:08 浏览: 105

div弹出窗口

使用div替代传统窗口弹出的不方便和差兼容性，比较好的兼容各种浏览器，背景屏蔽没写上去，代码比较简陋，

以下是一个简单的HTML代码，用于在点击按钮时弹出一个div窗口： ```html <!DOCTYPE html> <html> <head> <title></title> <style> #popup { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 200px; background-color: lightgray; padding: 20px; text-align: center; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } </style> </head> <body> <button id="btn">点击弹出窗口</button> <div id="popup"> <h2>这是一个弹出窗口</h2> <p>这里可以放置一些内容</p> <button id="close">关闭</button> </div> <script> var btn = document.getElementById("btn"); var popup = document.getElementById("popup"); var close = document.getElementById("close"); btn.onclick = function() { popup.style.display = "block"; } close.onclick = function() { popup.style.display = "none"; } </script> </body> </html> ``` 在这个示例中，我们使用CSS将弹出窗口设置为绝对定位，并将其放置在页面的中心位置。我们还使用JavaScript在按钮单击事件和关闭按钮单击事件上添加了事件侦听器，以便在单击按钮时显示弹出窗口，并在单击关闭按钮时隐藏弹出窗口。

阅读全文