如何创建独特的角度ui引导对话框

Question

如何设置angular-ui bootstrap模态对话框的样式，使它们在颜色和/或大小上看起来彼此不同？我可以为网站设置样式，但不能单独设置。

我发现了以下类似的问题，但它只提供了更改所有对话框的解决方案：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>

然后我为area2 .modal-dialog和area1 .modal-dialog制定了不同的css规则，但它们没有效果，因为这些对话框的html输出不会呈现为我的div的子元素。

有没有办法让个人控制这些对话框？

Answer 1

Angular UI模式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;
}