js 确定取消框

在JavaScript中，确定取消框通常是通过浏览器的confirm()函数来实现的。这个函数会弹出一个带有确定和取消按钮的对话框，并返回用户的选择。

基础概念

confirm()函数是JavaScript中的一个内置函数，用于显示一个带有消息和两个按钮（确定和取消）的对话框。用户点击确定按钮时，函数返回true；点击取消按钮时，返回false。

示例代码

let userConfirmed = confirm("你确定要继续吗？");

if (userConfirmed) {
    // 用户点击了确定按钮
    console.log("用户选择了确定");
} else {
    // 用户点击了取消按钮
    console.log("用户选择了取消");
}

优势

简单易用：confirm()函数是浏览器内置的，不需要额外的库或框架。
快速实现：可以在一行代码中实现一个确认对话框。

类型

confirm()函数只有一种类型，即带有确定和取消按钮的简单对话框。

应用场景

在用户执行某些可能带来严重后果的操作前，如删除文件、提交表单等，提示用户确认。
在需要用户明确同意或拒绝的情况下，如隐私政策确认等。

注意事项

confirm()函数会阻塞JavaScript的执行，直到用户做出选择。
由于confirm()函数的样式和行为在不同的浏览器中可能有所不同，因此在需要更复杂或自定义的对话框时，可能需要使用HTML、CSS和JavaScript来创建自定义的确认框。

自定义确认框

如果需要更复杂的确认框，可以使用HTML、CSS和JavaScript来创建。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Confirm Box</title>
    <style>
        .confirm-box {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            border: 1px solid #ccc;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .confirm-box button {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="confirm-box" id="confirmBox">
        <p>你确定要继续吗？</p>
        <button id="confirmYes">确定</button>
        <button id="confirmNo">取消</button>
    </div>
    <button onclick="showConfirmBox()">显示确认框</button>

    <script>
        function showConfirmBox() {
            document.getElementById('confirmBox').style.display = 'block';
        }

        document.getElementById('confirmYes').onclick = function() {
            document.getElementById('confirmBox').style.display = 'none';
            console.log("用户选择了确定");
        };

        document.getElementById('confirmNo').onclick = function() {
            document.getElementById('confirmBox').style.display = 'none';
            console.log("用户选择了取消");
        };
    </script>
</body>
</html>

这个示例展示了如何使用HTML、CSS和JavaScript创建一个自定义的确认框，可以更灵活地控制对话框的样式和行为。