UI-Bootstrap применяет только модальный фон к элементу

Question

Мое приложение показывает UI-Bootstrap modal внутри div, над ним есть панель навигации, обычно, когда я запускаю модальный, весь фон применяется с фоном (диммер), мой модальный не добавляется к body а к div как так (модальные варианты):

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

plunker

#mainContent несколько уровней вниз по DOM от тела, но и весь видовой экран тускнеет на фоне. Есть ли способ применить фон (или даже всю модульную сборку) только к одному элементу вместо всего окна просмотра?

Answer 1

Вы должны изменить CSS часть фона для этого, и он будет охватывать только первый родительский контейнер, который не имеет позицию: абсолютная

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

Я добавил его на plunker