Stacked/nested/multiple ng2-bootstrap 中的模态

Question

我在模态中有一个模态，除了一件事外，它大部分都有效。背景挂在已经打开的模式后面。我查看了文档，但不确定如何准确指定背景应该放在哪里。 API 显示 ModalBackdropComponent，选择器为 bs-modal-backdrop，但我不确定是否可以用它来解决我的问题。我不确定这是否是 z-index 问题，或者背景是否需要放置在特定位置。

Answer 1

我今天运行解决了这个确切的问题。通过显式定义我自己的 bs-modal-backdrop 组件实例，我找不到任何方法来解决它。我解决它的方法是在子模式的 bsModal 元素上设置 [config]="{ backdrop: false }"（禁用默认背景），然后我添加了一个新元素，如下所示：

<div class="modal-backdrop fade in" (click)="modal.hide()"></div>

作为子模态 bsModal 元素中的第一个元素。这假设您已将 modal 属性定义为 #modal="bs-modal" 或类似的。或者，您可以使用点击处理程序在您的组件上调用一个方法。

您还需要在 .modal-dialog 元素（应该是新 .modal-backgrop 元素的同级元素）上设置 1050 或更大的 z-index。

Answer 2

不幸的是，使用 ngx-boostrap，您无法控制 modal-container 或 bs-modal-backdrop 的类。似乎也没有办法将新元素添加为 .modal-dialog.

的兄弟元素

但是您可以设置 nested/child modal-container 的样式。 modal-container 顺序添加到 DOM。您可以使用 :nth-of-type CSS 选择器来设置子项 modal-container 的样式，使其背景（包括父模态）淡化。

modal-container:nth-of-type(2) {
  background: rgba(0, 0, 0, 0.5);
}

Answer 3

在全局 css 文件中 (styles.css):

modal-container+modal-container {
  background: rgba(0, 0, 0, 0.5);
}

Stacked/nested/multiple ng2-bootstrap 中的模态

Stacked/nested/multiple modals in ng2-bootstrap

typescript

ng2-bootstrap

angular