当前位置：首页 > JavaScript

js实现confirm

2026-03-01 03:54:34JavaScript

使用 `window.confirm` 方法

window.confirm 是 JavaScript 内置的对话框方法，用于显示一个带有确认和取消按钮的弹窗。用户点击确认返回 true，点击取消返回 false。

const result = confirm('确定要执行此操作吗？');
if (result) {
    console.log('用户点击了确认');
} else {
    console.log('用户点击了取消');
}

自定义模态框实现 Confirm

如果需要更灵活的样式或功能，可以通过 HTML 和 CSS 自定义一个模态框来模拟 confirm 的行为。

<div id="customConfirm" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border: 1px solid #ccc; z-index: 1000;">
    <p id="confirmMessage">确定要执行此操作吗？</p>
    <button id="confirmOk">确定</button>
    <button id="confirmCancel">取消</button>
</div>

function customConfirm(message, callback) {
    const confirmBox = document.getElementById('customConfirm');
    const confirmMessage = document.getElementById('confirmMessage');
    const confirmOk = document.getElementById('confirmOk');
    const confirmCancel = document.getElementById('confirmCancel');

    confirmMessage.textContent = message;
    confirmBox.style.display = 'block';

    confirmOk.onclick = function() {
        confirmBox.style.display = 'none';
        callback(true);
    };

    confirmCancel.onclick = function() {
        confirmBox.style.display = 'none';
        callback(false);
    };
}

// 使用示例
customConfirm('确定要删除吗？', function(result) {
    if (result) {
        console.log('用户点击了确认');
    } else {
        console.log('用户点击了取消');
    }
});

使用 Promise 封装 Confirm

结合 Promise 可以更方便地处理异步确认操作。

function promiseConfirm(message) {
    return new Promise((resolve) => {
        const result = confirm(message);
        resolve(result);
    });
}

// 使用示例
promiseConfirm('确定要继续吗？').then((confirmed) => {
    if (confirmed) {
        console.log('用户点击了确认');
    } else {
        console.log('用户点击了取消');
    }
});

使用第三方库

如果项目中使用 UI 框架（如 Bootstrap、Element UI 等），可以直接调用其提供的确认对话框组件。

以 Bootstrap 为例：

js实现confirm

// 需要引入 Bootstrap 和 jQuery
$('#myButton').click(function() {
    const result = confirm('确定要提交吗？');
    if (result) {
        console.log('用户点击了确认');
    }
});