我如何设置 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 的子元素。
有什么方法可以单独控制这些对话框吗?
最佳答案
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;
}
关于html - 如何创建外观独特的 Angular ui Bootstrap 对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26233755/