默认的bootstrap 5模态有一个"滑动"效果,如果它有一个静态背景,那么当点击静态背景时,它会显示一个"反弹"效果。
官方示例:
<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 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不同,标记相同):
x一个一个一个一个x一个一个二个x
在第二个示例中,模态显示为具有缩放效果,但在静态背景上单击时缺少反弹效果。
我如何做到这两点:使用缩放效果来显示/隐藏模态,但在单击静态背景时保留反弹效果?一个简单的只使用css的解决方案会更好。
1条答案
按热度按时间xjreopfe1#
消除CSS转换冲突
这个问题可以通过消除自定义模态缩放类和Bootstrap的模态反弹之间的冲突来解决。每个类都使用
transform scale
作为动画。幸运的是,有一个简单的css版本可以解决这个问题。我们需要在modal上保留Bootstrap
fade
类。Bootstrap在内部使用这个类来确定modal是否是动画的。然后我们可以像原始代码一样用zoom覆盖淡入淡出动画。避免与反弹冲突的关键是只在modal显示为not时应用缩放。换句话说,缩放只在modal打开或关闭时应用。修复使用:not()
然后我们可以将缩放效果应用于任何模态:
片段
这个代码段演示了应用缩放和不应用缩放的模态。显示模态后,单击灰色背景区域以测试反弹效果。
一个一个二个一个一个一个三个一个一个一个一个一个四个一个