如何創建外觀獨特的ui引導對話框

Question

如何設置angular-ui引導模式對話框的樣式，使它們在顏色和/或大小上看起來彼此不同？ 我可以為網站設置樣式，但不能單獨設置樣式。

我發現了以下類似問題，但它僅提供了更改所有對話框的解決方案： 如何在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

角UI模式Ç onfiguration可以接受的CSS類名稱參數windowClass 。 您可以為每個對話框提供單獨的類，並為每個類設置必要的樣式：

var modalInstance = $modal.open({
    templateUrl: 'myModalContent.html',
    controller: 'ModalInstanceCtrl',
    windowClass: 'fancy-modal'
});

它將在最上面的模式容器中添加fancy-class ，因此您可以從那里設置/覆蓋任何內部元素所需的樣式。 例如：

.fancy-modal .modal-content {
    background-color: #EEE;
}