Modal popups based on AngularJs is having predefined styles associated with it. If you want to customize the modal popup style, we can use the windowClass option available as part of the modal’s open method.Follow the steps to define new style for modal popup
1. Define our custom style
.my-dialog .modal-dialog {
width: 90%;
max-width: 800px;
top: 40%;
left: 1%;
}
Custom class definition should contain the internal .modal-dialog class reference.
2. Pass the new style class name as part of modal’s open method
var modalInstance = $modal.open({
templateUrl: ‘modalView.html’,
controller: modalViewCtrl,
windowClass: ‘my-dialog’
});
Note
For using the modal dialog, use the Angular UI Bootstrap (http://angular-ui.github.io/bootstrap/#/modal).
Include the library (ui-bootstrap-tpls-0.10.0.min.js) to the view and define the dependency module
angular.module(‘myApp’, [‘ui.bootstrap’ ])
Include the library (ui-bootstrap-tpls-0.10.0.min.js) to the view and define the dependency module
angular.module(‘myApp’, [‘ui.bootstrap’ ])
Advertisements
