首页用JavaScript写的一个自定义弹出式对话框

用JavaScript写的一个自定义弹出式对话框

时间: 2023-08-27 11:03:47 浏览: 79

下面是一个简单的示例代码，可以自定义弹出式对话框： ```html <!DOCTYPE html> <html> <head> <title>弹出式对话框</title> </head> <body> <button onclick="openDialog()">打开对话框</button> <div id="dialog" style="display:none; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:300px; height:200px; background-color:white; border:1px solid black;"> <h2>这是一个自定义的弹出式对话框</h2> <p>你可以在这里加入任何内容。</p> <button onclick="closeDialog()">关闭对话框</button> </div> <script> function openDialog() { var dialog = document.getElementById("dialog"); dialog.style.display = "block"; } function closeDialog() { var dialog = document.getElementById("dialog"); dialog.style.display = "none"; } </script> </body> </html> ``` 在这个示例中，我们使用了一个包含按钮和对话框的 HTML 页面。当用户点击按钮时，`openDialog()` 函数将会被调用，这个函数会将对话框的 `display` 属性设置为 `'block'`，从而显示出来。当用户点击对话框中的关闭按钮时，`closeDialog()` 函数将会被调用，这个函数会将对话框的 `display` 属性设置为 `'none'`，从而将其隐藏起来。需要注意的是，这个示例代码只是一个简单的示例，如果你需要更复杂的对话框，你需要进行更多的 CSS 和 JavaScript 编程。

阅读全文