how do I create unique looking angular ui bootstrap dialogs

Question

How do I style angular-ui bootstrap modal dialogs so they appear different from one another in color and/or size? I can style them for the site but not individually.

I found the following similar question but it only provides a solution to change all dialogs: How do I increase modal width in Angular UI Bootstrap? .

During initialization there are options to apply size='lg' and size='sm' but this is not nearly enough to style different dialogs as I would like.

I have tried structuring my html as follows:

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

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

Then I have made different css rules for area2 .modal-dialog and area1 .modal-dialog but they have no effect because the html output of those dialogs is not rendered as child elements of my divs.

Is there any way to get individual control over those dialogs?

Answer 1

Angular UI modal c onfiguration can accept CSS class name parameter windowClass . You can provide individual class for each of your dialog and set necessary styles per class:

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

It will add fancy-class to the topmost modal container, so from there you can set/overwrite whatever styles you want for any inner element. For example:

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