Как Bootstrap затемняет фон страницы за модальным

Question

Я не могу понять, что делает Bootstrap, чтобы затемнить фон страницы, когда отображается модальное изображение. Я вижу, что класс добавляется в тег body (открытый модально), но это, похоже, не влияет на фон.

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

Answer 1

Я использовал инструмент сравнения, чтобы увидеть разницу между открытым и модальным закрытым html и нашел ответ. Когда отображается модальное значение, Bootstrap вставляет пустой div чуть выше закрывающего тега тела:

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

Когда модальное закрыто, div удаляется. Класс .modal-backdrop.show имеет значение непрозрачности 0,5.

Так вот, как это делается!