Question

我在这里有此代码

单击确定bootstrap后，我试图关闭swal模态：

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并关闭。

Answer 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>

希望我进一步推动了你。

Answer 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');
    });

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

swal警报后，jquery引导程序模式关闭

2 个答案: