时间戳

首页 > 解决方案 > 由于 div 包含引导 css，Angular 6 ngb-bootstrap 模式未显示

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

问题描述

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

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

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

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

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

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

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

标签： cssangularwordpressbootstrap-4ng-bootstrap

解决方案

我找到了解决方案！

它是这样调用模态的：

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

推荐阅读