如何设置angular-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>


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

有什么方法可以使这些对话框具有单独的控制权吗?

最佳答案

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

10-05 20:55
查看更多