Как создать уникально выглядящие угловые диалоги ust bootstrap

Question

Как создать модальные диалоги с угловыми ui-загрузками, чтобы они отличались друг от друга по цвету и/или размеру? Я могу создать их для сайта, но не индивидуально.

Я нашел следующий аналогичный вопрос, но он предлагает только решение для изменения всех диалогов: How do I increase modal width in Angular UI Bootstrap?.

Во время инициализации есть варианты применить size = 'lg' и size = 'sm', но этого недостаточно, чтобы создать различные диалоги, как хотелось бы.

Я попытался структурировать мой HTML выглядит следующим образом:

<div id="area1"> 
    <div ng-include="'my-dialog1.html"></div> 
<div> 

<div id="area2"> 
    <div ng-include="'my-dialog2.html"></div> 
<div> 

Тогда я сделал различные правила CSS для area2 .modal-dialog и area1 .modal-dialog, но они не имеют никакого эффекта, так как HTML вывод этих диалогов не отображаются как дочерние элементы мои divs.

Есть ли способ получить индивидуальный контроль над этими диалогами?

Answer 1

Угловой пользовательский интерфейс c onfiguration может принимать параметр имени класса CSS windowClass. Вы можете предоставить индивидуальный класс для каждого из вашего диалога и установить необходимые стили в класс:

var modalInstance = $modal.open({ 
    templateUrl: 'myModalContent.html', 
    controller: 'ModalInstanceCtrl', 
    windowClass: 'fancy-modal' 
}); 

Это добавит fancy-class к верхнему модальному контейнеру, так оттуда вы можете установить/перезаписать любые стили вы хотите для любого внутреннего элемента , Например:

.fancy-modal .modal-content { 
    background-color: #EEE; 
}