Control Angularjs Modal Dialog Width

Note: This solution requires Bootstrap 3.1.0 or later.

With AngularJs, we can open a modal dialog by using the $modal service. The script to open a custom modal dialog can be as simple as follows:

var modalInstance = $modal.open({

                templateUrl: ‘my-dialog’,                               

                replace: true,

                                          

            });

This AngularJS service is based on the Boootstrap’s markup and CSS definitions. The templateUrl is just a HTML template emedded on the page, and it is listed below:

<script type="text/ng-template" id="my-dialog">

    <div>

        <div class="modal-header">

            <h3>Hi Dialog by ozkary</h3>

        </div>

        <div class="modal-body">

            <table width="780px;"><tr><td>Hello by ozkary.com</td></tr></table>

        </div>

        <div class="modal-footer">

            <button class="btn btn-primary" ng-click="$dismiss()">OK</button>

            <button class="btn btn-warning" ng-click="$close()">Cancel</button>

        </div>

    </div>

</script>

This script listed above uses the default value which renders a modal dialog with a mid size frame which is mostly use for messaging. When we need control of the width, we can use the parameter size. This parameter is a bit miss-leading since it may make us think that we can enter an integer value and control the size.  Instead, we need to use string constants that is appended to the CSS class modal-?? where the ?? is replaced by the string parameter. 

When we want a bigger dialog, we can use the lg constant, so that the style is set to modal-lg as follows:

var modalInstance = $modal.open({

                templateUrl: 'my-dialog',                               

                replace: true,

                size:'lg'                          

            });

We can see this in action with this plunker. The dialog is small or large based on the size parameter that we provide.

Hope it helps.