jquery弹出确认取消对话框

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 的 confirm 方法用于弹出一个带有“确定”和“取消”按钮的对话框，用户可以选择其中一个选项。

类型

jQuery 的 confirm 方法属于弹出对话框的一种类型，主要用于用户确认操作。

应用场景

删除操作确认：在执行删除操作前，弹出确认对话框以防止误操作。
重要操作确认：在执行重要操作前，弹出确认对话框以确保用户意图。
数据修改确认：在修改重要数据前，弹出确认对话框以确保用户了解修改内容。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Confirm Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="confirmButton">Delete Item</button>

    <script>
        $(document).ready(function() {
            $('#confirmButton').click(function() {
                if (confirm("Are you sure you want to delete this item?")) {
                    alert("Item deleted!");
                } else {
                    alert("Delete cancelled.");
                }
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：jQuery `confirm` 对话框样式不一致

原因：不同浏览器对 confirm 对话框的默认样式可能有所不同，导致显示效果不一致。

解决方法：使用自定义的模态对话框替代原生的 confirm 对话框，以确保样式一致。可以使用 jQuery UI 或 Bootstrap 等库来实现自定义对话框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Confirm Dialog</title>
    <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>
</head>
<body>
    <button id="confirmButton" class="btn btn-danger">Delete Item</button>

    <!-- Modal -->
    <div class="modal" tabindex="-1" role="dialog" id="confirmModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Delete</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete this item?</p>
                </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>
        $(document).ready(function() {
            $('#confirmButton').click(function() {
                $('#confirmModal').modal('show');
            });

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

通过使用自定义模态对话框，可以确保在不同浏览器中显示一致，并且可以自定义样式和行为。