Угловой UT Bootstrap Диалог Ширина

Question

Угловой пользовательский интерфейс Bootstrap Dialog прост в реализации, но его сложно настроить.

Как изменить ширину? Или даже максимальная ширина?

http://angular-ui.github.com/bootstrap/#/dialog

Я попытался $dialog.dialog({width:600}) и другие варианты, но никакой радости.

Answer 1

Осмотрите диалоговое окно в консоли браузера, увидите, что ширина установлена ​​только с помощью css. Функции в документации позволяют определить пользовательские имена классов на теле и/или на окне, так что вы можете настроить для различных типов в пределах страницы

Docs ссылка: https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/readme.md

Answer 2

Класс CSS по умолчанию modal, используйте опцию dialogClass (или атрибут options если вы используете modal директиву), чтобы указать дополнительные классы CSS, например:

$dialog.dialog({dialogClass: 'modal modal-huge'}); 

для модальной директивы:

<div modal="modalVisible" close="close()" 
    options="{dialogClass:'modal modal-huge'}"> 
    <div class="modal-header"><h3>Hello</h3></div> 
    <div class="modal-body">Hello world!</div> 
    <div class="modal-footer"> 
     <button ng-click="dialogs.escolherModelo=false" 
       class="cancel btn btn-warning">Cancel</button> 
    </div> 
</div> 

Если вы баловаться с диалоговой шириной, чтобы иметь диалог по центру, правило CSS необходим отрицательный margin-left половины ширины:

.modal-huge { 
    width: 80%; 
    margin-left: -40%; 
} 
@media (max-width: 600px) { 
    .modal-huge { 
     width: 580px; 
     margin-left: -290px; 
    } 
} 

[UPDATE]

теперь это называется windowClass, а ваше правило css должно быть для внутреннего .modal-диалога, так что это - .modal-огромный .modal-dialog - SET

Ou ch, похоже, что в мире javascript ничего не происходит. Это непроверенное:

$dialog.dialog({windowClass: 'modal-huge'}); 

Для модальной директивы:

<div modal="modalVisible" close="close()" 
    options="{windowClass:'modal-huge'}"> 
    <div class="modal-header"><h3>Hello</h3></div> 
    <div class="modal-body">Hello world!</div> 
    <div class="modal-footer"> 
     <button ng-click="dialogs.chooseModel=false" 
       class="cancel btn btn-warning">Cancel</button> 
    </div> 
</div> 

Если вы баловаться с диалоговой шириной, чтобы иметь диалог с центром, правило CSS требует отрицательного margin-left половины ширина:

.modal-dialog .modal-huge { 
    width: 80%; 
    margin-left: -40%; 
} 
@media (max-width: 600px) { 
    .modal-dialog .modal-huge { 
     width: 580px; 
     margin-left: -290px; 
    } 
} 

Answer 3

Вот как я добавить еще один класс в модальный диалог в угловом с помощью диалогового $ службы:

var opts = { 
    backdrop: true, 
    keyboard: true, 
    backdropClick: true, 
    templateUrl: 'my-partial.html', 
    controller: 'MyPartiallController', 
    dialogClass: 'modal myWindow' 
}; 
var d = $dialog.dialog(opts); 
d.open(); 

Диалог откроется с классом = "modal myWindow" - обратите внимание, что вы должны включить 'modal' или содержимое диалога появится под фоном.

Затем с этим CSS вы можете изменить ширину:

.modal.myWindow { 
    width:700px; 
    margin-left:-350px 
} 

Вы должны включать в себя отрицательную левую границу 1/2 ширины или она будет смещена от центра.

Answer 4

Для версии 0.8/0.9 расположение изменилось, так что вы не указали модальный класс, я повозился немного с ним вокруг и обнаружил, что я можно использовать вложенное определение CCS как это:

.xx-dialog .modal-dialog { 
    width :90%; 
    min-width: 800px; 
} 

а также при запуске модального диалога указать windowsStyle так:

modalInstance = $modal.open({ 
     templateUrl: 'templates/editxxx.html', 
     controller: EditXXCtrl, 
     windowClass: 'xx-dialog', 
     resolve: { 
      xx_uuid: function() { 
       return xx_guid; 
      } 
     } 
    }); 

Но следует помнить, что windowsstyle для всего окна, включая фон. Надеюсь, это поможет