UI-Bootstrap only apply modal backdrop to element

Question

My application shows a UI-Bootstrap modal inside a div, above it there is navigation bar, usually when I start the modal the entire background is applied with a backdrop (dimmer), my modal is not appended to body but rather to the div like so (modal options):

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

plunker

#mainContent is several levels down the DOM from body, but the entire viewport is dimmed by the backdrop. Is there a way to apply the backdrop (or even the entire modal assembly) to only 1 element instead of the entire viewport?

Answer 1

You have to change the CSS part of the backdrop to this and it will only cover the first parent container that doesn't have position:absolute

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

I have added it on the plunker