javascript - Bootstrap 模式隐藏不适用于 jquery ajax

Question

我有一个用 bootstrap 制作的模式对话框，如下所示:

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

我制作了一个像这样的 JavaScript 函数:

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

但是当我调用一些ajax函数时，模式会出现但不会隐藏。我将 console.log 放入两个函数(ajaxStart 和 ajaxStop)中并调用它。当我如下替换 ajaxStop 时，一切正常，但显示不正确。

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

主要问题是当我在ajax中调用另一个模态时，然后单击链接，出现加载ajax，请求发送到服务器，响应返回，出现带有请求数据的模态，但加载模态不隐藏。

如何修复它？

Answer 1

您必须设置超时。 这对我有用:

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