阅读量:0
ShowModalDialog 是一个用于显示模态对话框（modal dialog）的 JavaScript 方法，通常用于在用户执行某个操作之前显示确认对话框、提示信息或其他需要用户交互的内容。在 AJAX（Asynchronous JavaScript and XML）应用中，ShowModalDialog 可以用于在异步操作的不同阶段与用户进行交互。
以下是在 AJAX 应用中使用 ShowModalDialog 的一个简单示例：
- 首先，创建一个 HTML 文件，包含一个按钮和一个用于显示模态对话框的容器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AJAX ShowModalDialog Example</title> <style> .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .modal-content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } </style> </head> <body> <button onclick="showModal()">Show Modal</button> <div id="myModal" class="modal"> <div class="modal-content"> <p>Are you sure you want to proceed?</p> <button onclick="confirmAction()">Yes</button> <button onclick="closeModal()">No</button> </div> </div> <script src="script.js"></script> </body> </html> - 接下来，创建一个名为
script.js的 JavaScript 文件，用于处理模态对话框的显示和隐藏，以及 AJAX 请求：
function showModal() { var modal = document.getElementById('myModal'); modal.style.display = 'block'; } function closeModal() { var modal = document.getElementById('myModal'); modal.style.display = 'none'; } function confirmAction() { // Perform AJAX request var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // Handle the response data var data = JSON.parse(xhr.responseText); alert('Data received: ' + JSON.stringify(data)); } }; xhr.send(); // Close the modal after performing the AJAX request closeModal(); } 在这个示例中，当用户点击 “Show Modal” 按钮时，将显示一个模态对话框。用户可以在其中选择 “Yes” 或 “No”。如果用户选择 “Yes”，将执行一个 AJAX 请求以获取数据。请求完成后，无论请求成功还是失败，都将关闭模态对话框。
