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

Question

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

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

#mainContent 比正文 DOM 低几层，但整个视口因背景而变暗。有没有办法将背景（甚至整个模态组件）应用于 1 个元素而不是整个视口？

Answer 1

您必须将背景的 CSS 部分更改为此，它只会覆盖第一个没有 position:absolute

的父容器

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

我已经添加到 plunker

UI-Bootstrap only apply modal backdrop to element