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

Ответ 1

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

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

Ответ 2

Для версии 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 для окна WHOLE, включая фоновый рисунок. Надеюсь, что это поможет.

Ответ 3

Класс 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-диалога, поэтому ему нравится -.modal-огромный .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;
    }
}

Ответ 4

Здесь, как добавить еще один класс в модальный диалог в 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" - обратите внимание, что вы должны включить "модальный", или содержимое диалогового окна появится под фоном.

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

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

Вам нужно будет указать отрицательное левое поле шириной 1/2 или он будет неактивным.