首页网页弹窗代码

网页弹窗代码

时间: 2023-08-12 17:07:49 浏览: 73

以下是一个简单的弹窗代码实现： ```html <!DOCTYPE html> <html> <head> <title>弹窗示例</title> </head> <body>  <div id="popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.5);"> <h2>欢迎来到我的网站！</h2> <p>这是一个简单的弹窗示例。</p> <button onclick="closePopup()">关闭</button> </div>  <button onclick="showPopup()">点击弹窗</button> <script> function showPopup() { // 显示弹窗 document.getElementById("popup").style.display = "block"; } function closePopup() { // 关闭弹窗 document.getElementById("popup").style.display = "none"; } </script> </body> </html> ``` 通过设置一个包含弹窗内容的 `div` 元素，设置其样式为 `position: fixed;`，可以使其固定在页面上方，而不会随着页面滚动而移动。通过在 JavaScript 中控制其 `display` 属性，可以实现弹出和关闭的效果。

阅读全文