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设置宽度。文档中的选项允许在主体和/或对话框上使用用户定义的类名，以便您可以调整页面中的各种类型

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

Answer 4

这里是我如何使用$ 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 =＆＃34; modal myWindow＆＃34;打开。 - 请注意，您必须包含＆＃39;模态＆＃39;或对话框内容将显示在背景幕下。

然后用这个css你可以改变宽度：

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

你必须包括宽度为1/2的负左边距，否则它将偏离中心。

Angular UI Bootstrap对话框宽度

4 个答案: