Bootstrap：在模态中打开另一个模态

javascript jquery twitter-bootstrap modal-dialog twitter-bootstrap-3

2022-08-30 05:22:49

因此，我使用此代码在当前打开的模式窗口中打开另一个模式窗口：

<a onclick=\"$('#login').modal('hide');$('#lost').modal('show');\" href='#'>Click</a>

发生的事情是，在大约500ms内，滚动条将复制。我猜是因为目前的模态仍在逐渐消失。然而，它看起来非常不光滑和口吃。

如果能提出任何解决此问题的建议，我将不胜感激。

另外，在onclick事件中构建它的方式是否不专业？

我正在使用引导版本3.0。

编辑：我想有必要减少淡出模态的时间。这怎么可能？

答案 1

data-dismiss使当前模态窗口强制关闭

data-toggle打开一个新的模态，其中包含内容href

<a data-dismiss="modal" data-toggle="modal" href="#lost">Click</a>

或

<a data-dismiss="modal" onclick="call the new div here">Click</a>

请让我们知道它是否有效。

答案 2

我的解决方案不会关闭下部模态，而是真正堆叠在其之上。它正确保留了滚动行为。在 Bootstrap 3 中测试。要使模式按预期堆叠，您需要在 Html 标记中从低到高对模态进行排序。

$(document).on('hidden.bs.modal', function (event) {
  if ($('.modal:visible').length) {
    $('body').addClass('modal-open');
  }
});

更新：堆叠模态后，所有背景都显示在最下方的模态下方。您可以通过添加以下 CSS 来解决此问题：

.modal-backdrop {
    visibility: hidden !important;
}
.modal.in {
    background-color: rgba(0,0,0,0.5);
}

这将在最顶层可见模态下方提供模态背景的外观。这样，它就会在下面灰色地显示您的下模态。