从 jQuery 隐藏引导模式第一次不起作用

Question

我在使用 JQuery 代码时遇到了一些问题。 我正在尝试制作一个“动态”网站，因此每次单击链接时（'a' 元素具有 'link' 属性），我的代码都会获取 'link' 属性并将其传递给 jQuery 的 load() 函数.问题是，我想让用户知道内容正在加载，所以我想我可以在开始加载之前显示一个模式，并在完成后隐藏它，但它不起作用。当我第一次点击一个链接时，模态框会停留在那里，并且不会消失。但是，从第二次开始，我点击了任何链接，一切正常。

为什么只有第一次关闭失败？

$(document).on("click", "[link]", function() {
    $("#cargando").modal('show');
    $('#contenido').load($(this).attr('link'), function() {
        $('#cargando').modal('hide');
        $('.modal-backdrop').hide();
    });
});

额外信息：这段代码和模态 HTML 一起放在一个名为 dyn.html 的文件中，该文件包含在其余页面的末尾。

编辑，模态代码：

<div class="modal modal-static fade" id="cargando">
<div class="modal-dialog"><div class="modal-content">
<div class="modal-body"><div class="text-center">
<h4>Cargando...</h4>
</div></div></div></div></div>

编辑，它适用于：

$(document).on("click", "[link]", function() {
$('#cargando').modal('show');
$('#contenido').load($(this).attr('link'), function() {
$('#cargando').hide();
$('.modal').hide();
$('.modal-backdrop').hide();
});
});

这很混乱，但它是第一个起作用的东西。

Answer 1

$('.modal').hide();

通过应用超时功能替换此代码。所以会是这样。

setTimeout(function(){
  $('.modal').hide();
},100);

这里 100 是超时时间。

Answer 2

嗯，我一直处于这种情况。但是，这是我发现的，当模态想要弹出时，我尽量避免使用 modal('show') ，所以我更喜欢做的是将模态链接到一个元素并在该元素上设置正确的属性和模态将弹出。

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

所以试试这个，让我知道结果。不要使用

$("#cargando").modal('show');