How do I increase modal width in Angular UI Bootstrap?

Question

I am creating a modal:

var modal = $modal.open({                     templateUrl: "/partials/welcome",                     controller: "welcomeCtrl",                     backdrop: "static",                     scope: $scope,                 }); 

is there a way to increase its width?

Answer 1

I use a css class like so to target the modal-dialog class:

.app-modal-window .modal-dialog {   width: 500px; } 

Then in the controller calling the modal window, set the windowClass:

    $scope.modalButtonClick = function () {         var modalInstance = $modal.open({             templateUrl: 'App/Views/modalView.html',             controller: 'modalController',             windowClass: 'app-modal-window'         });         modalInstance.result.then(             //close             function (result) {                 var a = result;             },             //dismiss             function (result) {                 var a = result;             });     };