如何设置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-dialog
和area1 .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;
}