[英]how do I create unique looking angular ui bootstrap dialogs
How do I style angular-ui bootstrap modal dialogs so they appear different from one another in color and/or size? 如何设置angular-ui引导模式对话框的样式,使它们在颜色和/或大小上看起来彼此不同? I can style them for the site but not individually. 我可以为网站设置样式,但不能单独设置样式。
I found the following similar question but it only provides a solution to change all dialogs: How do I increase modal width in Angular UI Bootstrap? 我发现了以下类似问题,但它仅提供了更改所有对话框的解决方案: 如何在Angular UI Bootstrap中增加模态宽度? . 。
During initialization there are options to apply size='lg' and size='sm' but this is not nearly enough to style different dialogs as I would like. 在初始化期间,有一些选项可以应用size ='lg'和size ='sm',但这不足以像我所希望的那样设置不同的对话框的样式。
I have tried structuring my html as follows: 我试过构造我的html,如下所示:
<div id="area1">
<div ng-include="'my-dialog1.html"></div>
<div>
<div id="area2">
<div ng-include="'my-dialog2.html"></div>
<div>
Then I have made different css rules for area2 .modal-dialog
and area1 .modal-dialog
but they have no effect because the html output of those dialogs is not rendered as child elements of my divs. 然后,我为area2 .modal-dialog
和area1 .modal-dialog
制定了不同的css规则,但它们没有效果,因为这些对话框的html输出未呈现为div的子元素。
Is there any way to get individual control over those dialogs? 有什么方法可以使这些对话框具有单独的控制权吗?
Angular UI modal c onfiguration can accept CSS class name parameter windowClass
. 角UI模式Ç onfiguration可以接受的CSS类名称参数windowClass
。 You can provide individual class for each of your dialog and set necessary styles per class: 您可以为每个对话框提供单独的类,并为每个类设置必要的样式:
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
windowClass: 'fancy-modal'
});
It will add fancy-class
to the topmost modal container, so from there you can set/overwrite whatever styles you want for any inner element. 它将在最上面的模式容器中添加fancy-class
,因此您可以从那里设置/覆盖任何内部元素所需的样式。 For example: 例如:
.fancy-modal .modal-content {
background-color: #EEE;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.