如何在焦点模态窗口上获得“心跳”效果？答案

【问题标题】：How to get the "heartbeat" effect on focused modal window?如何在焦点模态窗口上获得“心跳”效果？
【发布时间】：2020-04-19 16:20:01
【问题描述】：

Bootstrap 有documentation about a "static" modal，在外部单击时不会关闭。如果您尝试在他们的演示中单击它的外部，它会以一点“心跳”（或您如何称呼它）效果进行动画处理，表明它需要注意。

但是当我从示例中复制他们的确切 HTML 代码时，它不会执行动画。在这里可用的小提琴： https://jsfiddle.net/5jhuwgnd/

显然这里缺少一些东西，而且似乎没有记录。而且它不能是 HTML 属性，因为我确实有 HTML 示例……它是需要包含的额外 JS 插件，还是什么？

（因为 Stackoverflow 不允许没有代码的 JS Fiddle 链接，所以在这里，虽然我不认为在这里有它的相关性）

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 bootstrap-modal

【解决方案1】：

小提琴缺少创建动画的 javascript。添加latest javascript 有效。

查看源代码时，modal.js 文件将 modal-static 类添加到模态。

  _triggerBackdropTransition() {
    if (this._config.backdrop === 'static') {
      const hideEventPrevented = $.Event(Event.HIDE_PREVENTED)

      $(this._element).trigger(hideEventPrevented)
      if (hideEventPrevented.defaultPrevented) {
        return
      }

      this._element.classList.add(ClassName.STATIC)

      const modalTransitionDuration = Util.getTransitionDurationFromElement(this._element)

      $(this._element).one(Util.TRANSITION_END, () => {
        this._element.classList.remove(ClassName.STATIC)
      })
        .emulateTransitionEnd(modalTransitionDuration)
      this._element.focus()
    } else {
      this.hide()
    }
  }

【讨论】：