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

sva*_*rog 5 css angularjs angular-ui-bootstrap twitter-bootstrap-3

我的应用表明内一个UI的引导模式div,它上面有导航栏,通常当我开始模态的整个背景施加的背景下(调光),我的模式是不附加body,而是在div像这样(模态选项):

appendTo: angular.element(document.querySelector("#mainContent")),
backdrop: true,
Run Code Online (Sandbox Code Playgroud)

plunker

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

Ale*_*cic 1

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

.modal-backdrop {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1040;
    background-color: #000;
}
Run Code Online (Sandbox Code Playgroud)

我已将其添加到plunker上