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

【问题标题】：Bootstrap modal hide not working with jquery ajax引导模式隐藏不适用于 jquery ajax
【发布时间】：2019-01-06 05:11:33
【问题描述】：

我有一个使用引导程序制作的模态对话框，如下所示：

<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，请求发送到服务器，响应返回，出现来自请求的数据模态，但加载模态不隐藏。

我该如何解决？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您可以尝试像这样绑定到 ajax 事件吗：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

当服务器响应时间超过 500 毫秒时，这可能不起作用。

【解决方案3】：

不要在 ajaxStop 中使用$('#myid').hide();，而是使用$('#myid').modal('hide');

【讨论】：

【解决方案4】：

你可以像下面这样使用：

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

【讨论】：