Угловой 6 мод ngb-bootstrap не отображается из-за начальной загрузки css для div - PullRequest
Новая
       8

Угловой 6 мод ngb-bootstrap не отображается из-за начальной загрузки css для div

0 голосов
/ 19 декабря 2018

Я знаю, что есть много вопросов о том, что модал не показывается, и у меня он уже работает в некоторых местах, но этот отличается!

У меня есть проект Wordpress, где я показываю AngularПриложение в админке.В приложении используется Bootstrap 4.Поэтому я не хотел воздействовать на администратора Wordpress с помощью Bootstrap 4 css при загрузке приложения Angular.

Чтобы заставить его работать, я использовал метод, в котором приложение обернуто div с class="bootstrap", и я использовал less для преобразования начальной загрузки CSS, так что все это окружено классом. bootstrap.Поэтому класс .text-danger написан как .bootstrap .text-danger и работает отлично!Мой админ не зависит от начальной загрузки css, но угловое приложение внутри админа изолированно.

Теперь проблема в том, когда я пытаюсь добавить ngb-modal в игру!Очевидно, он добавляет модал и его фоновые элементы прямо перед тегом body, который находится за пределами div-оболочки начальной загрузки, и, следовательно, изолированный CSS не применяется к этим элементам.ниже, он добавляется с элементом div обтекания, как это <div class="bootstrap">...ngb-modal code here...</div>?

const modalRef = this.modalService.open(MyModalComponent);

Надеюсь, я хорошо объяснил проблему!

1 Ответ

0 голосов
/ 20 декабря 2018

Я нашел решение!

Это называется модал так: 

// Create modal options
const modalOptions: NgbModalOptions = {
    container: '#id_my_bootstrap_container'
};

// Show the modal
const modalRef = this.modalService.open(MyModalComponent, modalOptions);

В div должен быть применен идентификатор: 

<div class="bootstrap" id="id_my_bootstrap_container">...ngb-modal code here...</div>

Thisсоздаст модальный внутри этого div вместо того, чтобы создавать его под тегом body, и, таким образом, модальный css будет применяться к нему, даже если он имеет префикс bootstrap class.

...