用jQuery隐藏Bootstrap模态框第一次无效。

Question

我有一个 JQuery 代码的问题。我正在尝试制作一个“动态”网站，所以每次单击链接（'a'元素具有“链接”属性），我的代码将“链接”属性传递给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();
});
});

虽然很混乱，但这是第一个奏效的东西。

- Jesús León

---

你能否尝试将 modal('show') 和 modal('hide') 都替换为 modal('toggle') 吗？ - Amar Syla

现在它加载了两个模态框。每次都是这样。有时甚至会超过两个。 - Jesús León

你能提供你的网站链接或在fiddle上重现吗？ - Amar Syla

请分享模态框的标记代码...可能有些地方出了问题。 - Taleeb

Answer 1

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

通过应用超时函数来替换此代码。因此，它应该是这样的。

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

这里的100是超时持续时间。

- Rama Krishna

---

我发现这对我大部分时间都有效。 但是为什么我们需要设置这个超时呢？我有一些其他的引导事件需要更长的超时时间。我担心用户会在我的应用中感受到它。为什么没有这个超时不起作用，有任何想法吗？ - Quintonn

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');

- Ehsan

---

同样的问题，但值得一提的是函数的第二行是有效的（“ $（'。模态背景'）.隐藏（）; ”）。我还尝试了“强制”它，通过将显示样式更改为无，但它也不起作用。 - Jesús León

你能不能不要隐藏它，让jquery函数检查一下这个例子http://www.w3schools.com/bootstrap/bootstrap_modal.asp。我认为你在错误的地方调用了hide函数。如果你能提供完整的代码就更好了。 - Ehsan

我认为问题可能源于您的点击事件绑定被嵌套。请查看此问题http://stackoverflow.com/questions/22631182/bootstrap-modal-button-click-event-not-fired-on-first-time?rq=1 - Ehsan

Answer 3

Bootstrap 3和4的更新

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

- ilyasbbu