首页网页弹窗代码

网页弹窗代码

时间: 2023-08-12 18:07:42 浏览: 129

以下是一个简单的网页弹窗代码示例： ```html <!DOCTYPE html> <html> <head> <title>网页弹窗</title> <script type="text/javascript"> function showPopup() { alert("这是一个弹窗！"); } </script> </head> <body> <button onclick="showPopup()">点击弹窗</button> </body> </html> ``` 在上述代码中，我们定义了一个 `showPopup()` 函数，当按钮被点击时会触发该函数并弹出一个警告框。你可以将 `alert()` 函数替换为其他弹窗库或自定义的弹窗函数来实现不同的效果。

五种网页弹窗html代码

以下是五种常见的网页弹窗HTML代码： 1. Alert弹窗： ```html <script> alert("Hello World!"); </script> ``` 2. Confirm弹窗： ```html <script> if (confirm("Are you sure?")) { // 用户点击了确认按钮 } else { // 用户点击了取消按钮 } </script> ``` 3. Prompt弹窗： ```html <script> var name = prompt("What is your name?"); alert("Hello, " + name + "!"); </script> ``` 4. 悬浮弹窗： ```html <div id="popup"> <h2>这是一个悬浮弹窗</h2> <p>弹窗内容</p> <button onclick="document.getElementById('popup').style.display='none'">关闭</button> </div> ``` 5. 模态框弹窗： ```html <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>弹窗内容</p> </div> </div> <script> var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } </script> ```

阅读全文