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

Answer 2

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

public let killswitches: [String]?

您可以传入自定义字符串，以modal- [yourSizeString]格式创建一个类。通过传入<div class="modal-dialog" ng-class="size ? 'modal-' + size : ''">或类似内容来扩展默认模式大小，以生成可以使用自定义宽度设置样式的类size: 'xl'。

<强> JS

modal-xl

<强> CSS

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

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

2 个答案: