Question

我目前在屏幕上打开了几个堆叠模态。我为此创建了一个基本的JSFiddle。

它们堆叠在：

#myModal{
  top: 0% ;
}
#myModal2{
  top: 5% ;
}
#myModal3{
  top: 10% ;
}
#myModal4{
  top: 15% ;
}

我想要的是能够在打开的模态之间单击。例如。当所有四个都启动时，我希望能够点击Modal 1的可见部分和Modal 1来到前面。或者（如果那不可能发生），我想要一个按钮让我将Modal 1带到前面。

到目前为止，我无法在bootstrap中找到任何可以让我这样做的东西。

Answer 1

我无法在小提琴中尝试这个，但你应该在所有带有类.modal-dialog的元素上创建一个click事件，并在事件处理程序中设置.modal的所有元素以确定z-index然后将使用this点击的模式设置为更高的z-index。

类似的东西：

$(".modal-dialog").click (function() {
      var modalSelected = $(this).parent();     
      $(".modal").each(function() {
          var idx = $(this).length;
          $(this).css('z-index', 1040 + (10 * idx));
      });
      modalSelected.css('z-index',1500);
 });

您可能遇到的问题是，一个大模态可能会完全遮盖所有其他模态对话框。你有没有想过using tabs instead？

在堆叠模态之间切换

1 个答案: