js showModalDialog弹出窗口实例详解

在JavaScript中，`showModalDialog` 方法曾经被用来显示模态对话框，但需要注意的是，这个方法在现代Web开发中已经不推荐使用，并且在许多现代浏览器中已经不再支持，因为它可能会阻碍用户的交互体验。不过，为了回答你的问题，我将提供一个使用 `showModalDialog` 的基本示例，并说明如何在现代Web应用中实现类似的模态对话框。

### 使用 `showModalDialog` 的旧式示例（不推荐）

假设你有一个HTML文件 `dialog.html`，你想通过另一个HTML文件或JavaScript代码来显示它作为模态对话框：

**dialog.html**:


<!DOCTYPE html>
<html>
<head>
    <title>Modal Dialog</title>
</head>
<body>
    <p>这是一个模态对话框的内容。</p>
    <button onclick="window.returnValue = '确认'; window.close();">确认</button>
    <button onclick="window.returnValue = '取消'; window.close();">取消</button>
</body>
</html>

**主页面JavaScript代码（不推荐使用）**:


function showMyDialog() {
    var returnValue = window.showModalDialog('dialog.html', '', 'dialogWidth:300px;dialogHeight:200px');
    alert('用户点击了: ' + returnValue);
}

// 调用函数显示对话框
showMyDialog();

### 现代Web应用中的替代方案

由于 `showModalDialog` 已被废弃，你可以使用HTML、CSS和JavaScript（通常结合库如jQuery UI、Bootstrap Modal或纯JavaScript的模态库）来创建模态对话框。以下是一个简单的使用原生JavaScript和HTML的示例：

**HTML结构**:


<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">×</span>
        <p>这是一个模态对话框的内容。</p>
        <button id="confirmBtn">确认</button>
        <button id="cancelBtn">取消</button>
    </div>
</div>

<button onclick="openModal()">打开模态框</button>

**CSS样式（简单示例）**:


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

**JavaScript**:


function openModal() {
    document.getElementById("myModal").style.display = "block";
}

document.getElementsByClassName("close")[0].onclick = function() {
    document.getElementById("myModal").style.display = "none";
}

document.getElementById("confirmBtn").onclick = function() {
    alert('用户点击了确认');
    document.getElementById("myModal").style.display = "none";
}

document.getElementById("cancelBtn").onclick = function() {
    alert('用户点击了取消');
    document.getElementById("myModal").style.display = "none";
}

在这个现代示例中，我们使用了HTML和CSS来创建模态对话框的外观，并通过JavaScript来控制它的显示和隐藏。这种方法更加灵活，且在现代浏览器中得到了广泛的支持。