Angular UI Bootstrap对话框宽度

Question

Angular UI Bootstrap对话框易于实现,但难以自定义.

你到底怎么改变宽度？甚至最大宽度？

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

我尝试过$dialog.dialog({width:600})和其他变化,但没有快乐.

Answer 1

对于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适用于整个窗口,包括背景.希望能帮助到你

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-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;
    }
}

Answer 3

在浏览器控制台中检查对话框将看到仅使用css设置宽度.docs中的选项允许在body和/或对话框中使用用户定义的类名,因此您可以调整页面中的各种类型

文档参考:https://github.com/angular-ui/bootstrap/blob/master/src/modal/docs/readme.md