js怎么弹出确认框

在JavaScript中，弹出确认框的方式有多种，常用的方法包括使用confirm()函数、创建自定义的模态框、利用第三方库。本文将详细解析每一种方式，并推荐适合的场景，以帮助你更好地选择和使用确认框。

一、使用`confirm()`函数

confirm()函数是JavaScript内置的函数，用于弹出一个带有指定消息的确认对话框，并且会暂停代码执行直到用户做出选择。返回值为布尔值：用户点击“确定”返回true，点击“取消”返回false。

if (confirm("您确定要继续吗？")) {
    // 用户点击“确定”执行的代码
    console.log("用户选择了确定");
} else {
    // 用户点击“取消”执行的代码
    console.log("用户选择了取消");
}

优点: 简单易用、无需额外依赖。
缺点: 样式不可定制，界面较为老旧。

二、创建自定义模态框

自定义模态框允许你完全控制其外观和行为。这种方法通常需要HTML、CSS和JavaScript的结合。

1. HTML部分

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>您确定要继续吗？</p>
        <button id="confirmBtn">确定</button>
        <button id="cancelBtn">取消</button>
    </div>
</div>

2. CSS部分

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

3. JavaScript部分

var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
var confirmBtn = document.getElementById("confirmBtn");
var cancelBtn = document.getElementById("cancelBtn");
// 显示模态框
function showModal() {
    modal.style.display = "block";
}
// 当用户点击 <span> (x)，关闭模态框
span.onclick = function() {
    modal.style.display = "none";
}
// 当用户点击“确定”按钮
confirmBtn.onclick = function() {
    console.log("用户选择了确定");
    modal.style.display = "none";
}
// 当用户点击“取消”按钮
cancelBtn.onclick = function() {
    console.log("用户选择了取消");
    modal.style.display = "none";
}
// 当用户点击模态框外部，关闭模态框
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
// 触发模态框显示
showModal();

优点: 可高度定制外观和行为，用户体验好。
缺点: 实现较复杂，需要编写较多代码。

三、利用第三方库

第三方库如SweetAlert、Bootstrap等，提供了简单易用的API来创建美观的确认框。

1. 使用SweetAlert

首先，你需要在HTML文件中引入SweetAlert的库：

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

然后，在JavaScript中使用以下代码：

swal({
    title: "您确定要继续吗？",
    text: "一旦确认，操作将无法撤销！",
    icon: "warning",
    buttons: true,
    dangerMode: true,
})
.then((willDelete) => {
    if (willDelete) {
        swal("用户选择了确定", {
            icon: "success",
        });
    } else {
        swal("用户选择了取消");
    }
});

优点: 界面美观、功能强大、易于集成。
缺点: 需要引入外部库，增加项目依赖。

2. 使用Bootstrap模态框

如果你的项目已经引入了Bootstrap，你可以利用Bootstrap的模态框组件来创建确认框。

首先，添加Bootstrap CSS和JS文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

然后，创建模态框HTML结构：

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h4 class="modal-title">确认操作</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                您确定要继续吗？
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="confirmBtn">确定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

最后，使用JavaScript控制模态框的显示和用户选择：

$('#myModal').modal('show');
$('#confirmBtn').click(function() {
    console.log("用户选择了确定");
    $('#myModal').modal('hide');
});

优点: 界面美观，易于集成，适合已经使用Bootstrap的项目。
缺点: 需要引入Bootstrap库。

四、总结

在JavaScript中弹出确认框的方法有多种选择，使用confirm()函数简单易用、自定义模态框灵活多样、第三方库如SweetAlert和Bootstrap提供了美观的界面。对于简单的确认需求，可以使用confirm()函数；对于需要高度定制化的需求，可以选择自定义模态框；如果希望快速集成美观的确认框，SweetAlert和Bootstrap都是不错的选择。

无论选择哪种方式，都需要根据项目的具体需求和技术栈来决定。希望本文能帮助你更好地理解和使用JavaScript确认框，提高用户体验和项目质量。