如何调整 Bootstrap modal 的打开延迟？答案

【问题标题】：How to adjust the delay of the opening of a Bootstrap modal?如何调整 Bootstrap modal 的打开延迟？
【发布时间】：2023-03-17 14:04:01
【问题描述】：

我正在使用gem "bootstrap-sass", "~> 2.3.0.0"，这意味着我正在使用Bootstrap 2。该模态记录在here。

我自己的模态是这样开始的：

#Modal.modal.hide.fade{"aria-hidden" => "true", "aria-labelledby" => "jobsModalLabel", :role => "dialog", :tabindex => "-1"}

我这样打开我的模式：

$("#Modal").modal().css "margin-left": ->
        -($(@).width() / 2)

我想让它加载得更快，但我无法从文档中了解如何控制延迟时间。我试图从我的模态中删除 .fade 类，但这会加速加载太多。所以我需要保留淡入淡出功能，但让它更快。

不确定这是 js 还是 css 的问题。我想这两种方式都可以解决，但我不知道如何。

当我用下面的代码覆盖我的.fade 类时，我的褪色速度不会加快：

.fade {
   opacity: 0;
   -webkit-transition: opacity 0.01s linear;
      -moz-transition: opacity 0.01s linear;
       -ms-transition: opacity 0.01s linear;
        -o-transition: opacity 0.01s linear;
           transition: opacity 0.01s linear;
}

如果我增加到例如3.00s，不过速度变慢了……

似乎.fade 与添加背景的过程有关。我希望加快模态从屏幕顶部到最终位置的过程。此过程在添加背景后发生。

【问题讨论】：

您可以操作 .fade 类，如下所述：[stackoverflow.com/questions/10441281/… [1]: stackoverflow.com/questions/10441281/…
谢谢，但我的问题与模态创建的“第二部分”有关。查看我更新的问题。

标签： javascript css ruby-on-rails twitter-bootstrap modal-dialog

【解决方案1】：

在 bootstrap v3（我碰巧在 v3.4.1 上）中，您可以编辑 modal.js（或者如果您有一个聚合的 bootstrap.js，您可以找到由 // MODAL CLASS DEFINITION 标头标记的模态部分）来完成你想做什么。

改变 Modal.TRANSITION_DURATION 和 Modal.BACKDROP_TRANSITION_DURATION 到非常低的值，比如 0 或 1 --

  ...
  Modal.TRANSITION_DURATION = 1
  Modal.BACKDROP_TRANSITION_DURATION = 1
  ...

然后过渡将尽可能立即发生。

这是我所指的源代码的链接——https://github.com/twbs/bootstrap/blob/v3.4.1/js/modal.js#L39

【讨论】：