JS 取消 javaScript Confirm-CFANZ编程社区

JavaScript 确认窗口的取消功能详解

在 web 开发中，confirm 方法通常用于提示用户进行确认操作。尽管这项功能直接并且易于实现，但是它也有其局限性，比如样式无法自定义、阻塞 UI 线程等等。在某些情况下，开发者可能希望拥有更灵活的控制能力，以便提供更好的用户体验。本篇文章将介绍如何取消默认的 JavaScript confirm 行为，并实现自定义的确认窗口。

什么是 `confirm`

confirm 是 JavaScript 中一种用于显示确认对话框的方法。它会弹出一个对话框，提示用户选择“确定”或“取消”。其基本语法如下：

let result = confirm("这是一条确认消息。");

如果用户点击“确定”，result 的值为 true；如果用户点击“取消”，值为 false。

`confirm` 方法的局限性

虽然 confirm 方法很容易使用，但它有几个缺点：

缺乏自定义：对话框的样式和内容均无法自定义。
阻塞：在显示对话框时，用户无法与页面进行交互，这可能导致糟糕的用户体验。
相同界面：所有浏览器的 confirm 窗口外观相同，不支持品牌化。

由于这些原因，许多开发者选择创建自定义确认对话框。

自定义确认对话框

下面是一个简单示例，显示如何使用 HTML 和 CSS 创建一个自定义的确认对话框。我们将使用 JavaScript 控制该对话框的显示与隐藏。

第一步：HTML 结构

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>自定义确认对话框</title>
</head>
<body>
    <button id="confirmBtn">确认操作</button>

    <div id="customConfirm" class="modal">
        <div class="modal-content">
            <p>你确定要继续吗？</p>
            <button id="yesBtn">是</button>
            <button id="noBtn">否</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

第二步：CSS 样式

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 300px;
    text-align: center;
}

button {
    margin: 5px;
}

第三步：JavaScript 控制

// script.js
document.getElementById("confirmBtn").onclick = function() {
    document.getElementById("customConfirm").style.display = "block";
};

document.getElementById("yesBtn").onclick = function() {
    // 用户确认操作
    alert("用户选择了是。");
    document.getElementById("customConfirm").style.display = "none";
};

document.getElementById("noBtn").onclick = function() {
    // 用户取消操作
    alert("用户选择了否。");
    document.getElementById("customConfirm").style.display = "none";
};

关系图：确认与取消逻辑

为了更好地理解我们的确认逻辑，可以使用 ER 图来表示相关的关系，如下所示：

erDiagram
    CONFIRM {
        string message "确认信息"
        string button1 "确认"
        string button2 "取消"
    }

    USER {
        string id "用户ID"
        string action "用户操作"
    }

    USER ||--o| CONFIRM : "触发"

在这个 ER 图中，我们定义了用户与确认对话框之间的关系。用户触发操作后，会显示确认信息，用户可以选择确认或取消。

旅行图：用户交互路径

接下来，我们用旅行图表示用户的交互路径：

journey
    title 用户确认流程
    section 用户操作
      用户点击确认按钮: 5: 用户
    section 确认窗口
      确认窗口显示: 2: 系统
      用户选择是: 4: 用户
      用户选择否: 4: 用户

在这张旅行图中，我们描述了用户点击确认按钮后，确认窗口的显示，以及用户选择“是”或“否”的过程。

总结

通过自定义确认对话框，开发者可以避免 JavaScript 默认 confirm 方法的局限性，提供更灵活、更美观的用户体验。同时，我们的示例及附图列出了涉及的逻辑关系和用户行为流程。在实际应用中，开发者可以根据需求扩展和美化此自定义对话框，以适应不同的场景。

希望通过本篇文章，您对如何取消 JavaScript Confirm 及实现自定义确认对话框有了更深入的理解。

JS 取消 javaScript Confirm