jquery自定义确认框

jQuery 自定义确认框是一种通过 jQuery 库实现的弹出式对话框，用于替代浏览器默认的 confirm 对话框。它可以提供更丰富的样式和交互体验，以满足特定的设计需求。

基础概念

jQuery 自定义确认框通常是通过创建一个模态对话框（modal dialog）来实现的。模态对话框会阻止用户与页面的其他部分进行交互，直到对话框被关闭。

类型

常见的自定义确认框类型包括：

简单确认框：仅包含“确定”和“取消”按钮。
带消息的确认框：显示一条消息，并提供操作选项。
复杂确认框：包含多个输入字段或其他交互元素。

应用场景

用户操作确认：在执行重要操作（如删除数据）前进行确认。
表单验证：在提交表单前显示验证结果的提示框。
应用设置：在更改关键设置时提供确认选项。

示例代码

以下是一个简单的 jQuery 自定义确认框示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Custom Confirm Box</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        .modal-footer {
            justify-content: flex-start;
        }
    </style>
</head>
<body>
    <button id="deleteBtn" class="btn btn-danger">Delete Item</button>

    <!-- Modal -->
    <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="confirmModalLabel">Confirm Action</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this item?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">Delete</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#deleteBtn').click(function() {
                $('#confirmModal').modal('show');
            });

            $('#confirmDelete').click(function() {
                // Perform delete action here
                alert('Item deleted!');
                $('#confirmModal').modal('hide');
            });
        });
    </script>
</body>
</html>