Bootstrap 5静态背景模态框：缩放动画与弹跳效果兼顾方案问询

问题背景 #

Bootstrap 5默认的静态背景模态框（设置data-bs-backdrop="static"）自带slide入场/退场动画，点击背景时还会有弹跳反馈。但自定义缩放（zoom）过渡效果后，点击背景的弹跳效果会丢失，需要同时保留缩放动画和背景点击的弹跳反馈，优先纯CSS解决方案。

纯CSS解决方案 #

核心思路是复用Bootstrap原生的modal-static类触发逻辑，同时替换默认的位移变换为缩放变换，并适配弹跳动画为缩放形式：

自定义CSS代码 #

/* 替换默认slide为zoom入场/退场过渡 */
.modal.fade .modal-dialog {
  transform: scale(0.8);
}
.modal.fade.show .modal-dialog {
  transform: scale(1);
}

/* 适配静态背景点击的弹跳动画，基于缩放修改原生逻辑 */
.modal-static .modal-dialog {
  animation: modal-static-bounce 0.3s ease-in-out;
}

@keyframes modal-static-bounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

完整示例代码 #

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
<script src="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropZoom">启动缩放模态框</button>

<!-- 模态框 -->
<div class="modal fade" id="staticBackdropZoom" 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">
        <h5 class="modal-title" id="staticBackdropLabel">缩放模态框</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        点击背景区域，查看弹跳反馈效果
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">确认</button>
      </div>
    </div>
  </div>
</div>

说明 #

• 无需修改HTML结构，仅需添加上述自定义CSS即可实现需求
• 动画参数（缩放比例、时长、缓动函数）可根据需求自行调整
• 完全基于CSS实现，保留Bootstrap原生的交互逻辑，无额外JS依赖

内容的提问来源于stack exchange，提问作者lonix