js怎么做一个确认弹框

在JavaScript中，可以通过多种方法来实现确认弹框。这些方法包括使用内置的 confirm() 方法、利用第三方库如 SweetAlert 和 Bootstrap，或者自定义弹框组件。以下是几种常见的实现方法：使用 confirm() 方法、使用 SweetAlert 库、使用 Bootstrap 模态框、自定义弹框组件。

使用 confirm() 方法

JavaScript 内置的 confirm() 方法是最简单的实现方式。它显示一个带有确认和取消按钮的对话框，并返回用户的选择。

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

使用 SweetAlert 库

SweetAlert 是一个美观、易用的第三方库，可以创建更具吸引力的弹框。使用 SweetAlert 库的好处是，它提供了丰富的自定义选项和现代化的外观。

安装 SweetAlert

首先，你需要在项目中引入 SweetAlert 库。可以通过 CDN 或 NPM 安装。

<!-- CDN 引入 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

# 使用 NPM 安装 npm install sweetalert2

使用 SweetAlert 创建确认弹框

Swal.fire({
    title: '你确定要继续吗？',
    text: "此操作不可撤销！",
    icon: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: '确定',
    cancelButtonText: '取消'
}).then((result) => {
    if (result.isConfirmed) {
        // 用户点击了“确定”
        console.log("用户选择了确定");
    } else {
        // 用户点击了“取消”
        console.log("用户选择了取消");
    }
});

使用 Bootstrap 模态框

Bootstrap 提供了一种优雅的方式来创建模态框（Modal）。与 SweetAlert 相比，Bootstrap 模态框需要更多的 HTML 和 CSS，但它提供了更大的灵活性。

添加 Bootstrap

首先，在项目中引入 Bootstrap CSS 和 JS 文件。

<!-- CDN 引入 -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>

创建模态框 HTML 结构

<!-- 模态框 HTML -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">确认操作</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                你确定要继续吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmButton">确定</button>
            </div>
        </div>
    </div>
</div>

使用 JavaScript 控制模态框

// 打开模态框
$('#confirmModal').modal('show');
// 添加点击事件监听器
document.getElementById('confirmButton').addEventListener('click', function() {
    // 用户点击了“确定”
    console.log("用户选择了确定");
    // 关闭模态框
    $('#confirmModal').modal('hide');
});

自定义弹框组件

如果你需要完全定制化的确认弹框，可以使用 HTML、CSS 和 JavaScript 创建自定义弹框组件。

创建自定义弹框 HTML 结构

<!-- 自定义弹框 HTML -->
<div id="customConfirm" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background-color:white; padding:20px; border:1px solid #ccc; box-shadow:0 2px 10px rgba(0,0,0,0.1); z-index:1000;">
    <p>你确定要继续吗？</p>
    <button id="customConfirmYes">确定</button>
    <button id="customConfirmNo">取消</button>
</div>
<!-- 遮罩层 -->
<div id="overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:999;"></div>

使用 JavaScript 控制自定义弹框

function showCustomConfirm() {
    document.getElementById('customConfirm').style.display = 'block';
    document.getElementById('overlay').style.display = 'block';
    document.getElementById('customConfirmYes').onclick = function() {
        // 用户点击了“确定”
        console.log("用户选择了确定");
        closeCustomConfirm();
    };
    document.getElementById('customConfirmNo').onclick = function() {
        // 用户点击了“取消”
        console.log("用户选择了取消");
        closeCustomConfirm();
    };
}
function closeCustomConfirm() {
    document.getElementById('customConfirm').style.display = 'none';
    document.getElementById('overlay').style.display = 'none';
}
// 打开自定义确认弹框
showCustomConfirm();

总结

通过以上几种方法，你可以在 JavaScript 中实现确认弹框。使用 confirm() 方法、SweetAlert 库、Bootstrap 模态框、自定义弹框组件，每种方法都有其优缺点。confirm() 方法简单直接，SweetAlert 提供了美观的界面，Bootstrap 模态框灵活性高，自定义弹框则完全可控。

选择合适的方法取决于项目需求和个人偏好。如果需要推荐项目团队管理系统，可以选择研发项目管理系统PingCode和通用项目协作软件Worktile，它们提供了丰富的功能和良好的用户体验。