20

Angular UI 引导对话框易于实现，但难以定制。

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

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

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

4

4 回答 4

40

For version 0.8/0.9 the layout has changed so you do not specify the modal class, I fiddled a little around with it and found that I you can use a nested CCS definition like this:

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

And the when you launch the modal dialog specify the windowsStyle like this:

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

But be aware that the windowsstyle is for the WHOLE window including the backdrop . Hope it helps

于 2014-01-05T14:01:22.553 回答
7

默认的 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;
    }
}
于 2013-07-09T16:22:54.127 回答
6

检查浏览器控制台中的对话框将看到宽度仅使用 css 设置。文档中的选项允许在正文和/或对话框上使用用户定义的类名，以便您可以针对页面内的各种类型进行调整

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

于 2013-03-29T13:45:35.387 回答
3

以下是我如何使用 $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 的负左边距，否则它将偏离中心。

于 2013-09-15T01:57:42.540 回答