时间戳

首页 > 解决方案 > Bootstrap V5 Alert Dismissing：单击“关闭按钮”时要求确认

javascript - Bootstrap V5 Alert Dismissing：单击“关闭按钮”时要求确认

问题描述

我正在尝试使用 Sweetalert2 向引导程序版本 5 警报组件添加一个很好的确认消息。

它是如何工作的？

当我单击“关闭按钮”（X）时，它应该显示一条确认消息，其中包含两个选项（是）和（否）如果我单击（是），则应该关闭警报组件如果（否）应该显示警报组件.

就是这样。

我遇到的问题是在关闭事件中，当我将此代码放入其中并单击（是）sweatalert2 确认消息中的选项时，它会在我的开发控制台中显示一条错误消息！

参考： https ://getbootstrap.com/docs/5.0/components/alerts/#dismissing

HTML 代码：

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

JS代码：

if ($(".alert").length) {
    $(".alert").on("close.bs.alert", function (e) {
        e.preventDefault();
        var swalWithBootstrapButtons = Swal.mixin({
            customClass: {
                confirmButton: "btn btn-primary",
                cancelButton: "btn btn-danger me-3",
            },
            buttonsStyling: false,
        });
        swalWithBootstrapButtons
            .fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                confirmButtonText: "<i class='fas fa-check-circle me-1'></i> Yes, I am!",
                cancelButtonText: "<i class='fas fa-times-circle me-1'></i> No, I'm Not",
                showCancelButton: true,
                reverseButtons: true,
                focusConfirm: false,
            })
            .then((result) => {
                if (result.isConfirmed) {
                    var alertNode = document.querySelector(".alert");
                    var alert = bootstrap.Alert.getInstance(alertNode);
                    alert.close();
                }
            });
    });
}

标签： javascriptjquerybootstrap-5

解决方案

问题

  1. alert没有创建实例。所以在关闭警报之前创建它。

  2. close.bs.alert在以编程方式关闭警报之前关闭事件。它可以防止无限执行。

笔记

您还可以将 jQuery 与 bootstrap 5 一起使用。因此它也可以简化为

$(e.target).off('close.bs.alert').alert('close'); 


$(".alert").on("close.bs.alert", function(e) {
  e.preventDefault();
  var swalWithBootstrapButtons = Swal.mixin({
    customClass: {
      confirmButton: "btn btn-primary",
      cancelButton: "btn btn-danger me-3",
    },
    buttonsStyling: false,
  });
  swalWithBootstrapButtons
    .fire({
      title: "Are you sure?",
      text: "You won't be able to revert this!",
      icon: "warning",
      confirmButtonText: "<i class='fas fa-check-circle me-1'></i> Yes, I am!",
      cancelButtonText: "<i class='fas fa-times-circle me-1'></i> No, I'm Not",
      showCancelButton: true,
      reverseButtons: true,
      focusConfirm: false,
    })
    .then((result) => {
      if (result.isConfirmed) {
        // using js
        var alertNode = document.querySelector(".alert");
        var alert = new bootstrap.Alert(alertNode);
        
        $(alertNode).off('close.bs.alert')
        alert.close();

        // using jQuery
        // $(e.target).off('close.bs.alert').alert('close'); 
      }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

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


<div class="alert alert-warning alert-dismissible fade show mt-5" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

推荐阅读