js自定义confirm弹窗

在JavaScript中，可以通过创建一个包含自定义HTML和CSS样式的模态对话框来实现自定义confirm弹窗。

以下是一个简单的例子：

HTML代码：

<div id="confirm-box">
    <div class="confirm-header">确认操作</div>
    <div class="confirm-message">您确定要执行此操作吗？</div>
    <div class="confirm-buttons">
        <button id="confirm-yes">是</button>
        <button id="confirm-no">否</button>
    </div>
</div>

CSS样式：

#confirm-box {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9999;
}

.confirm-header {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-top: 30px;
}

.confirm-message {
    font-size: 16px;
    text-align: center;
    margin-top: 20px;
}

.confirm-buttons {
    text-align: center;
    margin-top: 30px;
}

.confirm-buttons button {
    padding: 10px 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 20px;
    cursor: pointer;
}

.confirm-buttons button:hover {
    background-color: #f5f5f5;
}

JavaScript代码：

// 获取模态对话框和按钮元素
var confirmBox = document.getElementById("confirm-box");
var confirmYes = document.getElementById("confirm-yes");
var confirmNo = document.getElementById("confirm-no");

// 确认按钮点击事件
confirmYes.addEventListener("click", function() {
    // 执行确认操作
    confirmBox.style.display = "none";
});

// 取消按钮点击事件
confirmNo.addEventListener("click", function() {
    // 关闭模态对话框
    confirmBox.style.display = "none";
});

// 显示模态对话框
function showConfirmBox(message) {
    // 设置确认消息
    document.querySelector(".confirm-message").innerHTML = message;
    // 显示模态对话框
    confirmBox.style.display = "block";
}

使用时，可以调用showConfirmBox方法，并传入确认消息作为参数：

showConfirmBox("您确定要执行此操作吗？");

这样就可以弹出一个自定义的confirm弹窗，等待用户操作。