Bootstrap如何使模式背景后面的页面背景变暗

Question

我似乎无法弄清楚Bootstrap在显示模态时正在做什么以使页面背景变暗。我看到一个类添加到了body标签（modal-open），但这似乎并不影响背景。

https://getbootstrap.com/docs/4.0/components/modal/

Answer 1

我使用了一个diff工具来查看模式打开和模式关闭html之间的区别，并找到了答案。显示模态时，Bootstrap在结束body标签上方插入一个空div：

<div class="modal-backdrop fade show"></div>

当关闭模式时，将删除div。 .modal-backdrop.show类的不透明度值为0.5。

就是这样！