javascript - Bootstrap如何使模态背后的页面背景变暗

Question

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

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

标签： javascriptbootstrap-4bootstrap-modal

Answer 1

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

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

当模态框关闭时，div 被移除。该类.modal-backdrop.show的不透明度值为 0.5。

这就是它的完成方式！