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

Question

我正在使用bootstrap模式来显示消息.

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

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

Answer 1

是的,您可以提供size插值的键值(sm,md,lg).modal-sm, .modal-md and .modal-lg.

如angular-bootstrap文档中所述:

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和更改模板并覆盖默认模板实现或自己创建模板.

Answer 2

Angular UI Bootstrap根据传入的字符串作为modalInstance的大小选项,将条件类应用于每个模态.

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

您可以传入自定义字符串,以modal- [yourSizeString]格式创建一个类.通过传入size: 'xl'或类似的东西来扩展默认模态大小,以生成modal-xl可以使用自定义宽度设置样式的类.

JS

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

CSS

.modal-xl {
    width: 1200px;
}