是否可以在选项中给出模态的大小答案

【问题标题】：Is it possible to give the size of the modal in the options是否可以在选项中给出模态的大小
【发布时间】：2014-11-26 10:47:47
【问题描述】：

我正在使用引导模式来显示消息：

 var options = {
          backdrop: false,
          keyboard: true,
          backdropClick: false,
          templateUrl: 'a.html',
          controller: 'aController',  
        };
 var modalInstance = $modal.open(options);

是否可以提供自定义的宽度和高度样式属性？

【问题讨论】：

标签： angularjs twitter-bootstrap

【解决方案1】：

是的，您可以提供一个插入到.modal-sm, .modal-md and .modal-lg 的size 键值(sm, md, lg)。

如angular-bootstrap documentation所述：

size - 模式窗口的可选大小。允许值：'sm'（小）或 'lg'（大）。需要 Bootstrap 3.1.0 或更高版本

Javascript

 var options = {
          backdrop: false,
          keyboard: true,
          backdropClick: false,
          templateUrl: 'a.html',
          controller: 'aController',
          size: 'lg' // sm, md, lg
 };
 var modalInstance = $modal.open(options);

如果您对这些值提供的大小不满意，那么您有两种选择：

[1] 使用windowClass 属性向顶层模态窗口添加一个类，然后使用该类通过css子选择器更改相应的元素。

[2] 您还可以使用windowTemplateUrl 更改模板并覆盖默认模板实现或自己创建一个。

【讨论】：

感谢您的回答。它有帮助

【解决方案2】：

Angular UI Bootstrap 根据作为 modalInstance 的大小选项传入的字符串，对每个模态应用一个条件类。

<div class="modal-dialog" ng-class="size ? 'modal-' + size : ''">

您可以传入自定义字符串来创建格式为 modal-[yourSizeString] 的类。通过传入size: 'xl' 或类似的东西来扩展默认模态尺寸以生成可以自定义宽度样式的modal-xl 类。

myOpenFunc = function () {
    var modalInstance = $modal.open({
        animation: true,
        templateUrl: 'mypage.html',
        size: 'xl',
        controller: 'myCtrl'
    });
};

CSS

.modal-xl {
    width: 1200px;
}

【讨论】：