AngularJS modal component
Simple, flexible and beautiful modal dialogs in AngularJS.
Demo
Installation
- If you use bower or npm, just
bower/npm install v-modal. If not, download files from the github repo - Reference
v-modal.cssandv-modal.jsin your index.html file - Reference the module in your app:
angular.module('myApp', [ 'vModal' ])
Usage
app.js
angular.module('myApp', ['vModal'])
.factory('myModal', function (vModal) {
return vModal({
controller: 'MyModalController',
controllerAs: 'myModalCtrl',
templateUrl: 'my-modal.html'
});
})
.controller('MyModalController', function (myModal) {
this.close = myModal.deactivate;
})
.controller('AppController', function (myModal) {
this.show = myModal.activate;
});
index.html
<div ng-app="myApp" ng-controller="AppController as appCtrl">
<button ng-click="appCtrl.show()">Show</button>
</div>
my-modal.html
<v-modal class="vModal--default" onclose="myModalCtrl.close()">
<v-dialog heading="My modal" small middle>
<v-close label="Close"></v-close>
<h1>My modal</h1>
<button ng-click="myModalCtrl.close()">OK</button>
</v-dialog>
</v-modal>
Configuration
Sizes
smallmediumlargefit
<v-dialog large></v-dialog>
Positions
center(default)middle
<v-dialog middle></v-dialog>
Container
To change the default container selector, use modalConfig provider in your app config, like so:
angular
.module('myApp', ['vAccordion'])
.config(function (modalConfig) {
modalConfig.containerSelector = 'body';
});
SCSS
If you are using SASS, you can import vModal.scss file and override the following variables:
$v-modal-default-theme: true !default;
$v-modal-use-flexbox: true !default;
$v-modal-spacing: 20px !default;
$v-modal-zindex: 1000 !default;
$v-modal-backdrop: rgba(0,0,0, 0.5) !default;
$v-dialog-background: white !default;
$v-dialog-border-radius: 2px !default;
$v-dialog-sm-width: 340px !default;
$v-dialog-md-width: 560px !default;
$v-dialog-lg-width: 780px !default;
$v-close-color: #2196F3 !default;
$v-close-hover-color: #F44336 !default;
$v-close-hover-duration: 0.25s !default;
$v-modal-fade-animation-duration: 0.25s !default;
$v-dialog-enter-animation-duration: 0.5s !default;
Accessibility
By default, vModal manages keyboard focus and adds some common ARIA attributes to improve accessibility of your dialogs.
Credits
vModal service is based angular-modal by Brian Ford.