Is it possible to give the size of the modal in the options

Question

I am using bootstrap modal to show messages:

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

Is it possible to give the custom width and height style properties?

Answer 1

Yes you can provide a size key value(sm, md, lg) which interpolates to .modal-sm, .modal-md and .modal-lg.

As stated in the angular-bootstrap documentation:

size - optional size of modal window. Allowed values: '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 satisfied with the size provided by those values, then you have two options:

[1] Add a class to the top level modal window using the windowClass attribute and then use this class to change the respective elements via css child selectors.

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

Answer 2

Angular UI Bootstrap applies a conditional class to each modal based on what string is passed in as a size option to modalInstance.

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

You can pass in a custom string to create a class in the format modal-[yourSizeString]. Extend the default modal sizes by passing in size: 'xl' or something similar to generate the class modal-xl which can be styled with a custom width.

JS

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

CSS

.modal-xl {
    width: 1200px;
}