Angular 6 ngb-bootstrap 模态未显示，因为 bootstrap css 包含在 div 中

Question

我知道有很多关于模态未显示的问题，我已经在一些地方使用它了，但是这个不一样！

我有一个 Wordpress 项目，我在管理中显示了一个 Angular 应用程序。该应用已使用 Bootstrap 4。所以我不想在 Angular 应用程序加载时用 Bootstrap 4 css 影响 Wordpress 管理员。

为了让它工作，我使用了一种方法，其中应用程序由 div 和 class="bootstrap" 包装，我使用 less 将 bootstrap css 这样它就被.bootstrap class 包围了。因此 class .text-danger 写成 .bootstrap .text-danger 并且它工作完美！我的管理员不受 bootstrap css 的影响，但管理员中的 angular 应用程序是孤立的。

现在的问题是当我尝试将 ngb-modal 添加到游戏中时！它显然在 bootstrap 包装器 div 外部的 body 标签之前添加了模态及其背景元素，因此隔离的 css 不适用于这些元素。

有没有一种方法，当我像下面这样调用模态时，它会添加一个像这样 <div class="bootstrap">...ngb-modal code here...</div> 的包装 div 元素？

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

希望我把问题解释清楚了！

Answer 1

我找到了解决方案！

就是这样调用模态：

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

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

div 应应用 ID：

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

这将在 div 内创建模态，而不是在 body 标签下创建模态，因此模态 css 适用于它，即使它以 bootstrap [=22] 为前缀=].

Angular 6 ngb-bootstrap 模态未显示，因为 bootstrap css 包含在 div 中

Angular 6 ngb-bootstrap modal not showing because of bootstrap css contained for a div

css

wordpress

bootstrap-4

ng-bootstrap

angular