AngularJs – Modal popup with custom style

 
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’ ])
Advertisements

About ambilykk

I am a Technology Evangelist on Microsoft Technologies. I am carrying the passion on Microsoft technologies specifically on web technologies such as ASP .Net and Ajax. My interests also include Azure and Visual Studio. Technology adoption and learning is my key strength and technology sharing is my passion.
This entry was posted in AngularJs, HTML5 and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s