代码之家 › 专栏 › 技术社区 › Imran Ahmed

Angular 6 ngb引导模式未显示,因为div包含引导css

ng-bootstrap bootstrap-4 wordpress angular css

Imran Ahmed · 技术社区 · 6 年前

我有一个 Wordpress 我正在展示的项目 Angular Bootstrap 4 用过。所以我不想影响 Wordpress 管理员与当 有棱角的

div 用一个 class="bootstrap" 我曾经 less 转换引导css,使其全部由。 bootstrap 班级。所以一个班级 .text-danger .bootstrap .text-danger 它工作得很好!我的管理员不受引导css的影响,但是管理员内部的angular应用程序是隔离的。

现在的问题是当我尝试添加 ngb-modal 为比赛干杯!它显然是在body标记之前添加了modal及其背景元素,body标记位于bootstrap包装div之外,因此独立的css不适用于这些元素。

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

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

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

1 回复 | 直到 6 年前

Imran Ahmed 6 年前

我找到了解决办法!

// 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将应用于该div,即使其前缀为 bootstrap 班级。

推荐文章

Marcin Budzy · Twenty 24 Wordpess主题的子菜单隐藏在图库下方(响应式灯箱和图库)(Wordpress)

7 月前

Cairan Van Rooyen · 为什么我的Grafana iframe不会显示在我的Wordpress网站上?

8 月前

Eiman Maghfouri · woocommerce _可购买的编辑挂钩

8 月前

OÄuz Erdem · chrome浏览器和iOS safari浏览器的页脚行为不同

8 月前

JapeNZ · 通过自定义cron作业函数向WooCommerce产品添加产品标签

8 月前

Mohammed Malleck · 在WooCommerce管理员编辑订单页面中隐藏客户IP地址

1 年前

Javad Hamashbouri · 不显示ajax警报

1 年前

Eduardo Relax · 如何获取WooCommerce产品类别url以在HTML元标记中显示?

1 年前

Stamp · 自定义字段未显示在WordPress REST API响应中

1 年前

pawan19 · WordPress的Nginx设置:面临301重定向问题

1 年前