Is there a way to customize angular-ui bootstrap modal dialogs so that they have distinct colors and sizes from each other? I can style them globally for the site but not individually.
I came across a similar question, but it only addresses changing all dialogs: How do I increase modal width in Angular UI Bootstrap?.
While there are options during initialization to set size='lg' and size='sm', these are limited and do not provide enough flexibility to style different dialogs as desired.
I attempted to structure my html like this:
<div id="area1">
<div ng-include="'my-dialog1.html"></div>
<div>
<div id="area2">
<div ng-include="'my-dialog2.html"></div>
<div>
I then created separate css rules for area2 .modal-dialog and area1 .modal-dialog, but unfortunately, they had no effect because the html output of those dialogs is not rendered as child elements of my divs.
Is there any method to gain individual control over those dialogs?