阅读量:0
ShowModalDialog 是一个 JavaScript 函数，用于显示一个模态对话框（modal dialog），通常用于向用户请求信息或确认操作。在表单提交过程中，可以使用 ShowModalDialog 来实现一些交互式的操作，例如确认删除操作、提示输入额外的信息等。
以下是一个简单的示例，展示了如何在表单提交中使用 ShowModalDialog：
- 创建一个 HTML 表单：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Form with ShowModalDialog</title> </head> <body> <form id="myForm"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <br><br> <button type="submit">Submit</button> </form> <script src="script.js"></script> </body> </html> - 创建一个 JavaScript 文件
script.js，并在其中编写以下代码：
document.getElementById('myForm').addEventListener('submit', function (event) { event.preventDefault(); // 阻止表单默认提交行为 // 显示模态对话框 showModalDialog(); }); function showModalDialog() { const dialog = document.createElement('div'); dialog.style.position = 'fixed'; dialog.style.top = '0'; dialog.style.left = '0'; dialog.style.width = '100%'; dialog.style.height = '100%'; dialog.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; dialog.style.display = 'flex'; dialog.style.justifyContent = 'center'; dialog.style.alignItems = 'center'; const content = document.createElement('div'); content.style.backgroundColor = 'white'; content.style.padding = '20px'; content.style.borderRadius = '5px'; content.style.width = '300px'; const message = document.createElement('p'); message.style.margin = '0'; message.textContent = 'Are you sure you want to submit the form?'; const confirmButton = document.createElement('button'); confirmButton.style.marginRight = '10px'; confirmButton.textContent = 'Yes'; confirmButton.onclick = function () { submitForm(); closeDialog(); }; const cancelButton = document.createElement('button'); cancelButton.textContent = 'No'; cancelButton.onclick = function () { closeDialog(); }; content.appendChild(message); content.appendChild(confirmButton); content.appendChild(cancelButton); dialog.appendChild(content); document.body.appendChild(dialog); function closeDialog() { document.body.removeChild(dialog); } } function submitForm() { // 在这里执行表单提交操作，例如发送 AJAX 请求 console.log('Form submitted!'); } 在这个示例中，当用户点击提交按钮时，会显示一个模态对话框，询问用户是否确实要提交表单。用户可以选择“Yes”或“No”，对应的操作会执行相应的逻辑。
