Question

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>

Answer 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()
    }
  }

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

1 个答案: