Quick and simple dialog module for angularjs with no need for any other dependencies.

Added by: Sam Deering





Stars: 2

Watchers: 2

Forks: 1



Module Description

Angular Quick Dialog

Lightweight Angularjs directive designed to be dropped into a project and used easily and quickly with no dependencies other than angularjs. Tested using jasmine and protractor and built with gulpjs. Distributed through the bower package manager.


See it in action here.



Download the raw, minified js file from this repository and css file or install production ready directory through the bower package manager:

bower install angular-quick-dialog --save

Add script after angular.

<script src="/vendor/angular/angular.min.js"></script>
<script src="/vendor/angular-quick-dialog/angular-quick-dialog.min.js"></script>

Add it as a dependency in your module.

angular.module('exampleApp', ['angularQuickDialog']);


  • Uses a directive to create dialogs that can be controlled with an injectable factory service called $quickDialog.
  • Pressing the escape key while the dialog is open will close it.
  • Clicking on the page outside of the dialog will close the dialog.
  • Clean, responsive css styling (using BEM syntax) that is easily overwritten.

Browser Support

Angular quick dialog works in all modern browsers. It also works in ie8 with the caveat that you use a version of angularjs before 1.3 when they drop ie8 support and you follow their ie specific directions.


| Type | Filesize | | -------------------- | -------- | | minified | 2.1 kB | | minified and gzipped | 965 bytes|

Public API


Opens a dialog based on name. No return value.

| Param | Type | Description | | ----------- | -------- | --------------------------------------- | | Dialog name | String | Name of the dialog that will be opened. |


Closes a dialog based on name or if no name is provided it closes the top-most/most recently opened dialog. No return value.

| Param | Type | Description | |------------------------ | -------- | --------------------------------------- | | (optional) Dialog name | String | Name of the dialog that will be closed. |

Directive use

Dialogs need a name.

<quick-dialog dialog-name="options">
 * Your content here

(Optional) Enter the id of an element that you want the focus to switch to after opening the dialog. Note: Does not work in plunkr demo.

<quick-dialog dialog-name="options" open-focus="options-username">
 * Your content here

Same for which element you want focus switched to when the dialog is closed. Note: Does not work in plunkr demo.

<quick-dialog dialog-name="options" open-focus="options-username" exit-focus="landing-name">
 * Your content here

You can access the quick dialog controls by injecting the $quickDialog service.

    .controller('MainCtrl', function($scope, $quickDialog) {
        $scope.$quickDialog = $quickDialog;

Then use the open and close function respectively using the dialog's name. In html:

<button ng-click="$'options')">Open</button>
<button ng-click="$quickDialog.close('options')">Close</button>

Or in javascript:

    .controller('MainCtrl', function($scope, $quickDialog) {
        $scope.$quickDialog = $quickDialog;
        $scope.loggedIn = true;

        $scope.$watch('loggedIn', function(newVal, oldVal) {
            if (newVal !== oldVal && !newVal) {

Dialogs can also be stacked:

<quick-dialog dialog-name="options" open-focus="options-username" exit-focus="landing-name">
    <button ng-click="$'options:account')">

    <quick-dialog dialog-name="options:account">
         * Your content here

If $quickDialog.close does not receive any arguments it will close the top most stacked dialog.


Install gulp, bower, karma, and protractor globally.

npm install -g gulp bower karma protractor

Browse into the directory in the command line and install dependencies.

bower install
npm install

To build the project (minification, dependency injection, loading $templateCache, etc.)

gulp build

Test before committing.

gulp test:unit
gulp test:e2e

# Do both
gulp test

Module stats last updated: 2015-05-27 01:20:52

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!