Сделайте uibootstrap navbar пригодным для использования, когда есть активный модал

Question

Есть ли обходной путь для использования навигационной панели uibootstrap, когда на экране есть активный модал?

Это типичный navbar + модал в начальной загрузке 3:

Как вы можете видеть, меню недоступно, если присутствует модал.

Вот что я хотел бы:

Я могу изменить верхнее поле модала (от 30 до 70 пикселей) и z-index навигационной панели, чтобы оно было на верхнем фоне, но ...

Есть ли официальное решение для этого? как я могу сделать выпадающие списки пригодными для использования? потому что изменение z-index не исправляет это.

Answer 1

Вы должны изменить верхнюю позицию модального фона (имя класса .modal-backdrop), а не сам модал. Это непосредственный потомок тега body (в большинстве случаев). Модальный фон - это то, что на самом деле покрывает остальную часть страницы.

.modal-backdrop.show {
   top: 70px; // however much space you need for header
}

И, да, это способ сделать это. Angular UI Bootstrap также позволяет вам определять собственный шаблон окна, в котором вы можете сходить с ума и вносить столько изменений, сколько хотите.