Question

我在模态中有一个模态，它主要起作用，除了一件事。背景悬挂在已打开的模态背后。我检查了文档，我不确定如何准确指定背景应该去哪里。 API显示https://suba.mydomain.com，选择器为ModalBackdropComponent，但我不确定是否可以使用此功能来解决我的问题。我不确定这是否是z-index问题，或者背景是否需要放置在特定的位置。

Answer 1

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

<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的同级。

但是您可以设置嵌套/子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);
}

ng2-bootstrap中的堆叠/嵌套/多个模态

3 个答案: