js实现confirm
使用 window.confirm 方法
JavaScript 提供了内置的 window.confirm 方法，用于显示一个带有确认和取消按钮的对话框。用户点击确认返回 true，点击取消返回 false。
const result = confirm('确定要执行此操作吗？');
if (result) {
console.log('用户点击了确认');
} else {
console.log('用户点击了取消');
}自定义模态框实现
如果需要更灵活的样式或功能，可以通过 HTML 和 CSS 自定义一个模态框，并通过 JavaScript 控制其行为。
<div id="customConfirm" style="display:none;">
<div class="modal-content">
<p>确定要执行此操作吗？</p>
<button id="confirmBtn">确认</button>
<button id="cancelBtn">取消</button>
</div>
</div>function showCustomConfirm(message, callback) {
const modal = document.getElementById('customConfirm');
const confirmBtn = document.getElementById('confirmBtn');
const cancelBtn = document.getElementById('cancelBtn');
modal.style.display = 'block';
document.querySelector('#customConfirm p').textContent = message;
confirmBtn.onclick = function() {
modal.style.display = 'none';
callback(true);
};
cancelBtn.onclick = function() {
modal.style.display = 'none';
callback(false);
};
}
// 调用示例
showCustomConfirm('确定要删除吗？', (result) => {
if (result) {
console.log('用户点击了确认');
} else {
console.log('用户点击了取消');
}
});使用第三方库
如果需要更丰富的功能或更好的兼容性，可以使用第三方库如 SweetAlert2。
安装 SweetAlert2：
npm install sweetalert2使用示例：
import Swal from 'sweetalert2';
Swal.fire({
title: '确认操作',
text: '确定要执行此操作吗？',
icon: 'warning',
showCancelButton: true,
confirmButtonText: '确认',
cancelButtonText: '取消'
}).then((result) => {
if (result.isConfirmed) {
console.log('用户点击了确认');
} else {
console.log('用户点击了取消');
}
});注意事项
window.confirm是同步的，会阻塞代码执行直到用户响应。- 自定义模态框需要处理样式和交互逻辑，确保用户体验一致。
- 第三方库如 SweetAlert2 提供了更多定制选项，但会增加项目依赖。
根据需求选择合适的方法，简单的确认使用 window.confirm，复杂需求推荐自定义或第三方库。
