Как затемнить фон сайта при открытии dropdown в бутстрап?

Question

[lekseykorolev]

Хочу сделать такой же эффект как у модальных окон (затемнение фона сайта), только при открытии выпадающего списка dropdown. Подскажите как можно это реализовать?

Comments

[Сергей delphinpro]

.dropdown.open {
  box-shadow: 0 0 0 100000px rgba(0,0,0,0.5)
}

[Антон Литвиненко]

Сергей delphinpro, крутяк)

[lekseykorolev]

Сергей delphinpro, ноль реакции, вставил в css и ничего.
Версия бутстрап 5.2.1

[Сергей delphinpro]

lekseykorolev, Думать надо, а не тупо копировать код. Посмотрите, какие селекторы использованы в бутстрапе и пропишите их. Я же просто для примера от балды написал.

Answer 1

[Natebash]

Сделать div overlay, сделать позиционирование fixed растянув его на всю ширину и высоту, и пограться с z-index dropdown. на сам overlay повесить класс, который будет показывать его если dropdown открыт

Answer 2

[Сергей Ермилов]

Такие вещи уже разбирались на Стэке. Хорошим способом сделать это будет использование toggleClass и размещение обертки вокруг содержимого.

Код, который можно использовать для примера:

$(document).ready(function(){
    $(".collapsed").click(function(){
    $("#coverthishere").toggleClass("coverall");
    });
});

Пример на fiddle.

Используется класс меню collapsed в качестве триггера. И цель - ID coverthishere, чтобы добавить/удалить класс .coverall.