对jQuery隐藏bootstrap模式第一次不起作用

06odsfpq  于 2023-04-27  发布在  Bootstrap
关注(0)|答案(3)|浏览(163)

我在使用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();
});
});

虽然很乱但这是第一个有用的东西。

ufj5ltwl

ufj5ltwl1#

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

通过应用超时函数来替换这段代码。所以它会像这样。

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

这里100是超时持续时间。

ne5o7dgx

ne5o7dgx2#

我也遇到过这种情况。但是,我发现,我尽量避免使用modal('show '),当modal想要弹出的时候,所以我更喜欢做的是将modal链接到一个元素,并在该元素上设置正确的属性,然后modal就会弹出。

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

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

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

x7yiwoj43#

更新bootstrap 3和4

$('#modal').on('shown.bs.modal', function (e) {
  $('#modal').modal('hide');
})

相关问题