具有缩放效果和静态背景的 Bootstrap 5 模态

Question

默认的 bootstrap 5 modal 具有“滑动”效果，如果它具有静态背景，则在单击静态背景时会显示“弹跳”效果。

官方示例：

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

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

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

我想改用“缩放”effect（css 不同，标记相同）：

#staticBackdrop2.modal.fade      .modal-dialog { transform: scale(0.8) }
#staticBackdrop2.modal.fade.show .modal-dialog { transform: scale(1) }

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

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

<!-- Modal -->
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

在第二个示例中，模态显示具有缩放效果，但是在单击静态背景时缺少弹跳效果。

我怎样才能同时做到：使用缩放效果来显示/隐藏模态，但在单击静态背景时保留弹跳效果？一个简单的 css-only 解决方案将是首选。

Answer 1

消除 CSS 转换冲突

可以通过消除自定义模态缩放类与 Bootstrap 模态反弹之间的冲突来解决该问题。每个使用

transform scale

动画。幸运的是，有一个简单的 css only 解决这个问题。

我们需要在模态上保留 Bootstrap

fade

类。 Bootstrap 在内部使用它来确定模态是否是动画的。然后我们可以像在原始代码中一样使用缩放覆盖淡入淡出动画。避免与反弹冲突的关键是仅在 not 显示模态时应用缩放。换句话说，缩放仅在模式打开或关闭时应用。

修复使用 :not()

.modal.fade.zoom:not(.show) .modal-dialog {
    transform: scale(0.8);
}

然后我们可以将缩放效果应用于任何模态：

<div class="modal fade zoom" data-bs-backdrop="static">
   modal content
</div>

片段

该片段演示了应用缩放和未应用缩放的模态。显示模态后，单击灰色背景区域以测试弹跳效果。

zoom.addEventListener("change", (e) => {
  staticBackdrop.classList.toggle("zoom");
})

.modal.fade.zoom:not(.show) .modal-dialog {
   transform: scale(0.8);
}


/* rules not part of solution */

body {
 padding: 1rem;
}

img.logo {
  width: 100%;
  height: auto;
}

    <!-- Button trigger modal -->
    <button
      type="button"
      class="btn btn-primary btn-sm"
      data-bs-toggle="modal"
      data-bs-target="#staticBackdrop"
    >
      Show Modal
    </button>

    <label style="margin-left: 2rem;">
      <input type="checkbox" id="zoom" checked> Apply Zoom Effect
    </label>

    <!-- Modal -->
    <div
      class="modal fade zoom"
      id="staticBackdrop"
      data-bs-backdrop="static"
      data-bs-keyboard="false"
      tabindex="-1"
      aria-labelledby="staticBackdropLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="staticBackdropLabel">
              Modal Demo
            </h1>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/Stack_Overflow_logo.svg/1200px-Stack_Overflow_logo.svg.png" class="logo">
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
          </div>
        </div>
      </div>
    </div>
    

<!-- Bootstrap 5 -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>