AngularJS modal component

Simple, flexible and beautiful modal dialogs in AngularJS.

Demo

• GitHub
• CodePen

Installation

• If you use bower or npm, just bower/npm install v-modal. If not, download files from the github repo
• Reference v-modal.css and v-modal.js in your index.html file
• Reference the module in your app: angular.module('myApp', [ 'vModal' ])

Usage

app.js

1angular.module('myApp', ['vModal'])
2
3.factory('myModal', function (vModal) {
4  return vModal({
5    controller: 'MyModalController',
6    controllerAs: 'myModalCtrl',
7    templateUrl: 'my-modal.html'
8  });
9})
10
11.controller('MyModalController', function (myModal) {
12  this.close = myModal.deactivate;
13})
14
15.controller('AppController', function (myModal) {
16  this.show = myModal.activate;
17});

index.html

1<div ng-app="myApp" ng-controller="AppController as appCtrl">
2  <button ng-click="appCtrl.show()">Show</button>
3</div>

my-modal.html

1<v-modal class="vModal--default" onclose="myModalCtrl.close()">
2  <v-dialog heading="My modal" small middle>
3    <v-close label="Close"></v-close>
4
5    <h1>My modal</h1>
6
7    <button ng-click="myModalCtrl.close()">OK</button>
8  </v-dialog>
9</v-modal>

Configuration

Sizes

• small
• medium
• large
• fit

1<v-dialog large></v-dialog>

Positions

• center (default)
• middle

1<v-dialog middle></v-dialog>

Container

To change the default container selector, use modalConfig provider in your app config, like so:

1angular
2  .module('myApp', ['vAccordion'])
3  .config(function (modalConfig) {
4    modalConfig.containerSelector = 'body';
5  });

SCSS

If you are using SASS, you can import vModal.scss file and override the following variables:

1$v-modal-default-theme:    true !default;
2$v-modal-use-flexbox:      true !default;
3
4$v-modal-spacing:          20px !default;
5$v-modal-zindex:           1000 !default;
6$v-modal-backdrop:         rgba(0,0,0, 0.5) !default;
7
8$v-dialog-background:      white !default;
9$v-dialog-border-radius:   2px   !default;
10
11$v-dialog-sm-width:        340px !default;
12$v-dialog-md-width:        560px !default;
13$v-dialog-lg-width:        780px !default;
14
15$v-close-color:            #2196F3 !default;
16$v-close-hover-color:      #F44336 !default;
17$v-close-hover-duration:   0.25s   !default;
18
19$v-modal-fade-animation-duration:    0.25s !default;
20$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.