Is it possible to specify the size of the modality in the parameters

Question

I am using bootstrap modal to display messages.

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

Can I set custom width and height style properties.

Answer 1

Yes, you can specify the key value size (sm, md, lg), which will be interpolated to .modal-sm, .modal-md and .modal-lg .

As stated in the angular-bootstrap documentation:

size - optional size of the modal window. Valid values ​​are sm (small) or lg (large). Requires Bootstrap 3.1.0 or later.

Javascript

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

If you are not comfortable with the size provided by these values, you have two options:

[ 1 ] Add the class to the top-level modal window using the windowClass attribute, and then use this class to modify the corresponding elements using the child css selectors.

[ 2 ] You can also change the template using windowTemplateUrl and override the default template implementation or create one yourself.

Answer 2

Angular UI Bootstrap applies a conditional class to each modal object, depending on which string is passed as the size option for modalInstance.

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

You can pass a custom string to create a class in the format modal- [yourSizeString]. Expand the default modal sizes by going to size: 'xl' or something similar to generate a modal-xl class that you can create with custom widths.

Js

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

CSS

 .modal-xl { width: 1200px; }