2013-03-14 9 views
10

Live Examplekątowa UI Bootstrap Modal paski id i class atrybutów

Dodawanie następujące Angular UI Bootstrap Modal:

<div id="my-id" class="my-class" modal="opened"> 
    <p>Modal Here</p> 
</div> 

wyniki w:

<div class="modal ng-scope"> 
    <p>Modal Here</p> 
</div> 

Dlaczego id i class atrybuty są usuwane?

Chciałbym ustawić styl CSS w oknie dialogowym, np. szerokość okna dialogowego lub stylizacja wewnętrznych elementów okna dialogowego. Jak mogłem to osiągnąć?

+1

'modal' to dyrektywa wygody' dialogu', która ma znacznie więcej elastyczności i opcji. – charlietfl

+0

Próbowałem ustawić szerokość wewnętrznego "div", ale wynik jest dość zły. –

Odpowiedz

8

Oto github issue wyjaśniające, dlaczego identyfikator jest usuwany.

chodzi o klasy, nie jestem pewien, dlaczego to, że pozbawiony, ale można użyć $dialog options określić klasę (który będzie naprawić swój problem):

<div id="my-id" modal="opened" options="{dialogClass: 'modal my-class'}"> 
    <p>Modal Here</p> 
</div> 
+0

Wygląda na to, że ustawienie 'dialogClass' powoduje, że modus nie wyświetla się poprawnie: http://plnkr.co/edit/PyDqFwY8ejhZVqvzjwq6?preview&p=preview. Chyba dlatego, że ustawienie 'dialogClass' usuwa klasę' modal'. Jakieś pomysły, jak to naprawić? –

+0

Domyślam się, że mógłbym ustawić 'dialogClass: 'modal my-class'', ale wygląda trochę na zhakowanie. Czy istnieje lepszy sposób? –

+0

Tak, zapomniałem o klasie modalnej. Nie znam innego sposobu, nie użyłem tego zbyt wiele. – Stewie

12

Bo właśnie przyszedł całej tej irytującej kwestii ja i dokumentacja oraz domyślne zachowanie nie jest oczywiste. Teraz można przejść w dodatkowych zajęciach metodą $ modal.open() za pomocą opcji windowClass:

var modalInstance = $modal.open({ 
     templateUrl: 'templateUrl.html', 
     controller: Controller, 
     windowClass: 'custom-css-class', 
     ... 
    }); 

Nie można ustawić identyfikator choć co jest kulawy. Więcej informacji na oficjalnej stronie angular-ui modal docs.

+0

tak. walczę od wielu dni. w końcu tutaj jest odpowiedź. –

+0

Niektóre odpowiedzi ułatwiają życie. Sława. –

Powiązane problemy