引导模式隐藏不适用于 jquery ajax

Question

I have a modal dialog made with bootstrap, like this:

<div class="modal fade" id="myid">
  <div class="modal-dialog">
    <div class="modal-content">
       Loading...
    </div>
  </div>
</div>

And I make a javascript function like this:

$(document)
            .ajaxStart(function () {
                $('#myid').modal('show');
            })
            .ajaxStop(function () {
                $('#myid').modal('hide');
            });

But when I call some ajax function the modal appears but no hide. I put console.log in both functions (ajaxStart and ajaxStop) and it was called. when I replace ajaxStop as below, everything works, but not appears right.

$(document)
                .ajaxStart(function () {
                    $('#myid').modal('show');
                })
                .ajaxStop(function () {
                    $('#myid').hide();
                    $('.fade').hide();
                });

The main problema is when I call another modal within ajax, then I click in link, loading ajax appears, request is send to server, response returns, modal with data from request appears, but loading modal not hide.

How can I fix it?

Answer 1

Can you try binding to the ajax events like this:

$("#myid").bind({
   ajaxStart: function() { $(this).show(); },
   ajaxStop: function() { $(this).hide(); }
}); 

Answer 2

You have to set a timeout. That works for me:

setTimeout(function () { $("#myid").modal("hide"); }, 500);

Answer 3

Instead of using $('#myid').hide(); in ajaxStop, use $('#myid').modal('hide');

Answer 4

Hide processing does not occur, probably because the closing is done without performing the modal opening operation. This worked for me;

setTimeout(() => {$('#ModalExpeditionSeal').modal('hide')}, 350)

Answer 5

you can use as the following:

$("#myid").modal().hide()