阅读量:1
showmodaldialog方法已被废弃,推荐使用其他替代方法来实现类似的功能。一种替代方案是使用模态框库,比如Bootstrap Modal或者使用原生的JavaScript来创建自定义的模态框。
例如,可以使用以下代码来创建一个简单的模态框:
<!DOCTYPE html> <html> <head> <title>Modal Example</title> <style> .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; } .modal-content { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } </style> </head> <body> <button onclick="openModal()">Open Modal</button> <div id="myModal" class="modal"> <div class="modal-content"> <span onclick="closeModal()" style="float:right;">×</span> <p>This is a modal!</p> </div> </div> <script> function openModal() { document.getElementById("myModal").style.display = "block"; } function closeModal() { document.getElementById("myModal").style.display = "none"; } </script> </body> </html>
这段代码创建了一个简单的模态框,点击按钮可以打开模态框,点击模态框的关闭按钮或者点击背景都可以关闭模态框。可以根据需要进行修改和定制。