js 网页对话框关闭后返回值

在JavaScript中，网页对话框（如alert()、confirm()和prompt()）通常用于与用户进行简单的交互。这些对话框都是同步的，意味着在对话框关闭之前，代码的执行会暂停。

对话框类型及其返回值

alert():
- 描述: 显示一条消息和一个“确定”按钮。
- 返回值: 无返回值（undefined）。

confirm():
- 描述: 显示一条消息以及“确定”和“取消”两个按钮。
- 返回值: 如果用户点击“确定”，返回true；如果点击“取消”，返回false。
prompt():
- 描述: 显示一条消息、一个输入框以及“确定”和“取消”两个按钮。
- 返回值: 如果用户点击“确定”，返回输入框中的值；如果点击“取消”，返回null。

应用场景

alert(): 用于显示重要信息或警告，不需要用户响应。
confirm(): 用于需要用户确认或拒绝的操作，例如删除文件前的确认。
prompt(): 用于获取用户的输入，例如用户名或密码。

示例代码

// alert() 示例
alert("这是一个警告信息");

// confirm() 示例
let isConfirmed = confirm("你确定要删除这个文件吗？");
if (isConfirmed) {
    console.log("文件已删除");
} else {
    console.log("删除操作已取消");
}

// prompt() 示例
let userName = prompt("请输入你的名字：");
if (userName !== null) {
    console.log("你好，" + userName + "!");
} else {
    console.log("用户取消了输入");
}

注意事项

由于这些对话框是同步的，它们会阻塞页面的其他交互，因此在现代Web开发中，通常推荐使用自定义的模态对话框（如使用HTML、CSS和JavaScript创建的对话框），以提供更好的用户体验。
自定义模态对话框可以通过事件监听器来处理用户的响应，并且不会阻塞页面的其他操作。

自定义模态对话框示例

<!-- HTML -->
<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close-button">&times;</span>
        <p>你确定要删除这个文件吗？</p>
        <button id="confirmDelete">确定</button>
        <button id="cancelDelete">取消</button>
    </div>
</div>

<!-- CSS -->
<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%;
}
.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
</style>

<!-- JavaScript -->
<script>
let modal = document.getElementById("myModal");
let closeButton = document.getElementsByClassName("close-button")[0];
let confirmDeleteButton = document.getElementById("confirmDelete");
let cancelDeleteButton = document.getElementById("cancelDelete");

// 打开模态对话框
function openModal() {
    modal.style.display = "block";
}

// 关闭模态对话框
closeButton.onclick = function() {
    modal.style.display = "none";
}
cancelDeleteButton.onclick = function() {
    modal.style.display = "none";
    console.log("删除操作已取消");
}
confirmDeleteButton.onclick = function() {
    modal.style.display = "none";
    console.log("文件已删除");
}

// 点击窗口外部关闭模态对话框
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

// 示例：点击按钮打开模态对话框
document.getElementById("openModalButton").onclick = openModal;
</script>

通过这种方式，你可以创建更灵活和用户友好的对话框，并且不会阻塞页面的其他操作。