html - 如何创建外观独特的 Angular ui Bootstrap 对话框

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;
}