jquery 确认框

jQuery 确认框的实现方法

jQuery 可以通过多种方式实现确认框（Confirmation Dialog），常见的方法包括使用原生 JavaScript 的 confirm() 函数或借助第三方插件（如 jQuery UI 或 Bootstrap Modal）。以下是几种实现方式：

使用原生 confirm() 函数

原生 JavaScript 提供了 confirm() 函数，可以直接在 jQuery 事件中调用：

$("#myButton").click(function() {
    if (confirm("确定要执行此操作吗？")) {
        // 用户点击“确定”后的逻辑
        console.log("操作已确认");
    } else {
        // 用户点击“取消”后的逻辑
        console.log("操作已取消");
    }
});

• 优点：简单直接，无需额外依赖。
• 缺点：样式固定，无法自定义。

使用 jQuery UI Dialog

如果需要更灵活的确认框，可以使用 jQuery UI 的 dialog 组件：

1. 引入 jQuery UI 库：

   <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

2. 创建确认框：

   

   $("#confirmDialog").dialog({
       autoOpen: false,
       modal: true,
       buttons: {
           "确定": function() {
               console.log("操作已确认");
               $(this).dialog("close");
           },
           "取消": function() {
               console.log("操作已取消");
               $(this).dialog("close");
           }
       }
   });
   
   $("#myButton").click(function() {
       $("#confirmDialog").dialog("open");
   });

3. HTML 结构：

   <div id="confirmDialog" title="确认操作">
       <p>确定要执行此操作吗？</p>
   </div>

• 优点：可自定义样式和按钮。
• 缺点：需要加载 jQuery UI 库。

使用 Bootstrap Modal

如果项目中已使用 Bootstrap，可以通过 Bootstrap Modal 实现确认框：

1. HTML 结构：

   

   <div class="modal fade" id="confirmModal" tabindex="-1">
       <div class="modal-dialog">
           <div class="modal-content">
               <div class="modal-header">
                   <h5 class="modal-title">确认操作</h5>
               </div>
               <div class="modal-body">
                   <p>确定要执行此操作吗？</p>
               </div>
               <div class="modal-footer">
                   <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                   <button type="button" class="btn btn-primary" id="confirmAction">确定</button>
               </div>
           </div>
       </div>
   </div>

2. jQuery 逻辑：

   $("#myButton").click(function() {
       $("#confirmModal").modal("show");
   });
   
   $("#confirmAction").click(function() {
       console.log("操作已确认");
       $("#confirmModal").modal("hide");
   });

• 优点：与 Bootstrap 风格一致，响应式设计。
• 缺点：需要依赖 Bootstrap。

使用第三方插件（如 SweetAlert）

SweetAlert 提供了美观且易用的确认框：

1. 引入 SweetAlert：

   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

2. 调用确认框：

   $("#myButton").click(function() {
       Swal.fire({
           title: "确认操作",
           text: "确定要执行此操作吗？",
           icon: "warning",
           showCancelButton: true,
           confirmButtonText: "确定",
           cancelButtonText: "取消"
       }).then((result) => {
           if (result.isConfirmed) {
               console.log("操作已确认");
           }
       });
   });

• 优点：高度自定义，动画效果丰富。
• 缺点：需加载额外资源。

选择建议

• 简单需求：使用原生 confirm()。
• 需要自定义样式：选择 jQuery UI 或 Bootstrap。
• 追求美观和交互：使用 SweetAlert。

根据项目需求选择合适的实现方式即可。