swal警报后jquery bootstrap模式关闭

Question

I have this code here

I am trying to close bootstrap modal after swal is clicked ok:

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

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

Nothing is happening, not even alert , only if I click the close button on the modal, it shows an alert and closes.

Answer 1

You should use the .then() method which accepts a callback function, in that callback you'd close the modal.

Here a demo to demonstrate how this'll work:

I don't know your markup, so, in my example, I have a button to open a modal and when it's clicked a Sweet Alert popup shows containing two buttons, if the OK button of that popup is pressed, the modal will immediately be hidden.

The modal's structure is taken from the BootStrap 's documentation.

 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>

Hope I pushed you further.

Answer 2

The answers I found didn't work, because the hide.bs.modal even is triggered before the promise from SWAL is returned. This is my working function:

        $('#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');
    });

As you can see, I add a class to the modal whenever the close event is triggered by the code, so I use e.preventDefault() to prevent the modal from closing. Whenever the modal has been successfully hidden, I remove that class again, so it will work again the next time the user tries to close it.