Question

当我使用这个javascript代码打开模态时：

$(".modal-wide").on("show.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

它很好地打开了，但是当我从旧的内部或者任何情况下打开另一个时，它与旧的重叠。我需要它关闭其他模态（可能有一个“后退”按钮，但我们首先关注主要问题）。

这是一个codepen.io链接，其中包含我使用的css和html的完整示例： http://codepen.io/Volcan3/pen/RpyRxd

Answer 1

只需在代码下添加以下javascript代码即可。

您可以通过链接JSFiddle查看更改。

JAVASCRIPT -

$('a[data-toggle="modal"]').bind('click',function(){
    $('.modal').modal('hide');
});

Answer 2

在打开modal2之前调用此行

$('#modal1').removeClass('in').hide()

Answer 3

我处理了您的codepen示例并且有效：

$("a[data-toggle=modal]").click(function(){
 setTimeout(function(){$('.fade.in[id^=modal]').last().siblings('.fade.in[id^=modal]').removeClass('in').hide();},300);
});

将其添加到js脚本的底部

Answer 4

一种棘手的方法，只需将data-dismiss="modal"添加到#modal2锚点，无需额外的javascript：

<a href="#modal2" data-toggle="modal" data-dismiss="modal">modal 2</a>

打开新模式时关闭所有其他模态

4 个答案: