Сложенные/вложенные/несколько модалов в ng2-bootstrap

Question

У меня модальный внутри модальный, и он в основном работает, за исключением одной вещи. Фон зависает за модальным, который уже открыт. Я проверил документацию, и я не уверен, как точно указать, где должен быть задний фон. API показывает ModalBackdropComponent, с селектором bs-modal-backdrop, но я не уверен, есть ли что-то, что я могу сделать с этим, чтобы решить мою проблему. Я не уверен, что это проблема с z-индексом, или если фон должен быть помещен где-то конкретным. Я немного удивлен, что это будет сделано, учитывая, что мой модальный (флажок подтверждения) определяется как ребенок, другой модальный.

Answer 1

Сегодня я столкнулся с этой точной проблемой. Я не мог найти способ разрешить его, явно определяя мой собственный экземпляр компонента . Путь я решил, что должен был установить [config]="{ backdrop: false }" на bsModal элемент детского модальный (отключить фон по умолчанию), а затем я добавил новый элемент, как это:

<div class="modal-backdrop fade in" (click)="modal.hide()"></div> 

Как первый элемент внутри ребенка модальный bsModal элемент , Предполагается, что вы определили свойство modal как #modal="bs-modal" или подобное. В качестве альтернативы вы можете вызвать метод на своем компоненте с помощью обработчика кликов.

Вам также необходимо установить Z-индекс на .modal-dialog элемент (который должен быть родственником нового .modal-backgrop элемента) из 1050 или больше.