Angular UI Bootstrap 对话框宽度答案

【问题标题】：Angular UI Bootstrap Dialog WidthAngular UI Bootstrap 对话框宽度
【发布时间】：2014-02-14 22:54:25
【问题描述】：

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

到底如何改变宽度？甚至是最大宽度？

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

我尝试了$dialog.dialog({width:600}) 和其他变体，但没有任何乐趣。

【问题讨论】：

标签： angularjs angular-ui angular-ui-bootstrap

【解决方案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 适用于整个窗口，包括背景。希望对你有帮助

【讨论】：

绝对是最好的解决方案。非常适合动态宽度！
windowClass属性中是否可以调用css中的多个类？
我不知道，但既然你有邮件课程，你应该能够解决你需要的课程。在我的项目中，模式框中没有多级类。它适用于普通类 CSS 定义的文件。
它，使用 .modal-content 而不是 .modal-dialog 可以正常工作

【解决方案2】：

默认 CSS 类是 modal，使用 dialogClass 选项（如果您使用 modal 指令，则使用 options 属性）来指定其他 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;
    }
}

【讨论】：

它现在被称为 windowClass 并且你的 css 规则应该用于内部 .modal-dialog，所以它就像 - .modal-huge .modal-dialog
@SET：感谢您提供信息，尝试更新答案，但我没有时间测试它 - 如果您发现一些错误并想这样做，请修正我的答案。
@SET：感谢您的修复，版主错误地拒绝了您的编辑（不幸的是，他们中的许多人都懒得阅读 cmets）。
另外请注意规则中的空格：.modal-huge .modal-dialog。 windowClass 会将类应用到主对话框 div，但我们需要将宽度更改为它的父级 .modal-dialog。也不需要options="{windowClass:'modal-dialog modal-huge'}"，只需options="{windowClass:'modal-huge'}"

【解决方案3】：

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

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

【讨论】：

该链接已失效。我确信他们已经搬走了它，这不是你的问题，但它让我发疯，因为我找不到它。您是否有更新的链接？
@uriDium: github.com/angular-ui/bootstrap/blob/master/src/modal/docs/…

【解决方案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="modal myWindow" 打开 - 请注意，您必须包含“modal”，否则对话框内容将出现在背景下方。

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

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

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

【讨论】：