W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> :modal { background-color: gold; border: 2px solid maroon; border-radius: 5px; font-size: 20px; } button { padding: 10px; font-size: 15px; } </style> </head> <body> <h1>:modal 示例</h1> <p>点击“打开模态框”按钮可打开模态框。</p> <button id="showModal">打开模态框</button> <dialog id="myModal"> <form method="dialog"> <p>这是一个模态对话框。</p> <button>关闭模态框</button> </form> </dialog> <script> const myModal = document.getElementById('myModal'); showModal.addEventListener('click', () => { myModal.showModal(); }); </script> </body> </html>