swal警报后jquery引导模式关闭答案

【问题标题】：jquery bootstrap modal closing after swal alertswal警报后jquery引导模式关闭
【发布时间】：2018-09-25 23:29:56
【问题描述】：

我这里有这段代码

我正在尝试在点击 swal 后关闭 bootstrap 模态框：

swal({
    title:'', 
    text:'Thanks, we will contact you !', 
    type: 'success'
});

$("#modal").on('hidden.bs.modal', function () {
    alert('boo');
    $(this).data('bs.modal', null);
}).trigger();

什么都没有发生，甚至alert 也没有，只有当我单击模式上的关闭按钮时，它才会显示alert 并关闭。

【问题讨论】：

通常jquery中关闭bootstrap modal的方法如下：$("#modal").modal('hide')。您的代码正在侦听模式已关闭的事件。因此它的工作方式与预期一样，因为警报仅在您手动关闭模式时才会出现。

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您应该使用接受回调函数的.then() 方法，在该回调中您将关闭模式。

这里有一个演示来演示它是如何工作的：

我不知道你的标记，所以在我的例子中，我有一个按钮来打开一个模式，当它被点击时，一个 Sweet Alert 弹出窗口显示包含两个按钮，如果 OK 按下该弹出窗口的按钮，模态将立即被隐藏。

模态的结构取自BootStrap的文档。

var myModal = $('#exampleModal');
myModal.on('show.bs.modal', function() {
  swal({
    title: 'Close modal ?',
    text: 'Do you want to close the modal ?',
    icon: 'warning',
    buttons: true
  }).then(function(value) {
    if(value === true) {
      myModal.modal('hide');
    }
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" 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">Modal title</h5>
  </div>
  <div class="modal-body">
    <p class="alert alert-success">There are no any buttons to close the modal, it's closed either by pressing the backdrop or by pressing <strong>OK</strong> button of the Sweet Alert's popup.</p>
  </div>
  <div class="modal-footer">
    normally, some buttons are placed here...
  </div>
</div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>

希望我把你推得更远。

【讨论】：

是的，谢谢，但为什么 modal 在 swal 之前，我不想声明它，因为它已经声明了
@uBobby 我刚刚为您做了一个演示，演示如何在 swal 警报后关闭模式，您只考虑.then() 方法。它不应该复制/粘贴我的代码，它只会向您展示如何使用 .then() 方法完成您的任务。

【解决方案2】：

我找到的答案不起作用，因为 hide.bs.modal 甚至在 SWAL 的承诺返回之前被触发。这是我的工作功能：

        $('#myModal').on("hide.bs.modal", function (e) {

        if (!$('#myModal').hasClass('programmatic')) {
            e.preventDefault();
            swal.fire({
                title: 'Are you sure?',
                text: "Please confirm that you want to cancel",
                type: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Yes, cancel',
                cancelButtonText: 'No, I clicked by mistake',
            }).then(function(result) {
                if (result.value) {
                    $('#myModal').addClass('programmatic');
                    $('#myModal').modal('hide');
                    e.stopPropagation();

                } else {
                    e.stopPropagation();

                }
            });

        }
        return true;
    });

    $('#myModal').on('hidden.bs.modal', function () {
        $('#myModal').removeClass('programmatic');
    });

如您所见，每当代码触发关闭事件时，我都会向模态添加一个类，因此我使用e.preventDefault() 来防止模态关闭。每当模式被成功隐藏时，我都会再次删除该类，以便下次用户尝试关闭它时它会再次起作用。

【讨论】：