Jquery Bootstrap Modal Closing After Swal Alert

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

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

<linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" /><buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal">
  Launch demo modal
</button><!-- Modal --><divclass="modal fade"id="exampleModal"tabindex="-1"role="dialog"aria-labelledby="exampleModalLabel"aria-hidden="true"><divclass="modal-dialog"role="document"><divclass="modal-content"><divclass="modal-header"><h5class="modal-title"id="exampleModalLabel">Modal title</h5></div><divclass="modal-body"><pclass="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><divclass="modal-footer">
    normally, some buttons are placed here...
  </div></div></div></div><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>

Hope I pushed you further.

Solution 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();

                }
            });

        }
        returntrue;
    });

    $('#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.