UI-Bootstrap仅将模态背景应用于元素

Question

我的应用程序在div内部显示了一个UI-Bootstrap模式，在它上方有导航栏，通常当我启动模态时，整个背景应用了背景（调光器），我的模态不附加到body，而是像div一样（模态选项）：

appendTo: angular.element(document.querySelector("#mainContent")),
backdrop: true,

plunker

#mainContent是从身体到DOM的几个级别，但整个视口都被背景调暗。有没有办法将背景（甚至整个模态组件）仅应用于1个元素而不是整个视口？

Answer 1

你必须将背景的CSS部分更改为此，它只会覆盖没有位置的第一个父容器：绝对

.modal-backdrop {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1040;
    background-color: #000;
}

我已将其添加到plunker