由于 div 包含引导 css，Angular 6 ngb-bootstrap 模式未显示

Posted 2023-03-06

【中文标题】由于 div 包含引导 css，Angular 6 ngb-bootstrap 模式未显示

【英文标题】：Angular 6 ngb-bootstrap modal not showing because of bootstrap css contained for a div

【发布时间】：2019-05-19 15:32:01

【问题描述】：

我知道有很多关于模态不显示的问题，我已经在一些地方工作了，但是这个不同！

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

为了使其工作，我使用了一种方法，其中应用程序由 div 和 class="bootstrap" 包装，我使用 less 转换引导 css，使其全部被 .bootstrap 包围班级。因此，.text-danger 类的写法类似于.bootstrap .text-danger，而且效果很好！我的管理员不受引导 css 的影响，但管理员内部的 Angular 应用程序是隔离的。

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

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

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

我希望我能很好地解释这个问题！

【参考方案1】：

我找到了解决办法！

就是这样调用modal：

// 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 类为前缀。