Ширина диалогового окна Angular UI Bootstrap

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

Ссылка на документы: https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/readme.md

Для версии 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;
            }
        }
    });

Но имейте в виду, что стиль окна предназначен для ВСЕГО окна, включая фон. Надеюсь, поможет

Класс 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;
    }
}

[ОБНОВИТЬ]

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

Ой, кажется, в мире 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;
    }
}

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

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

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

Затем с помощью этого css вы можете изменить ширину:

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

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