STATUS: UNMAINTAINED

angular-fancy-modal

The definitive modal/popup/dialog solution for AngularJS. Modal dialogs and popups for Angular.js (>=1.2.x) applications. Mobile friendly out of the box.

Brought to you by Alessandro Arnodo [@vesparny]

See a working demo with examples on usage.

Install

via bower:

bower install angular-fancy-modal --save

or clone this repository for using the unstable version.

Usage

You need only to include angular-fancy-modal.js and angular-fancy-modal.css to your project and then you can start using it:

var app = angular.module('exampleApp', ['vesparny.fancyModal']);

app.controller('MyCtrl', function ($scope, $fancyModal) {
	$scope.open = function () {
		$fancyModal.open({ templateUrl: 'popupTmpl.html' });
	};
});

API

$fancyModal service provides easy to use and minimalistic API, but in the same time it's powerful enough. Here is the list of accessible methods that you can use:

===

.open(options)

Method allows to open modal dialog. It accepts options object as the only argument.

Options:

$modal is a service to quickly create AngularJS-powered modal windows. Creating custom modals is straightforward: create a partial view, its controller and reference them when using the service.

The $modal service has only one method: open(options) where available options are like follows:

• templateUrl - a path to a template representing modal's content
• template - inline template representing the modal's content
• scope - a scope instance to be used for the modal's content (actually the $modal service is going to create a child scope of a provided scope). Defaults to $rootScope
• controller - a controller for a modal instance - it can initialize scope used by modal. Accepts the "controller-as" syntax in the form 'SomeCtrl as myctrl';Every controller will have a $modal object instance in its scope, useful for closing the dialog.
• resolve - members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property for AngularJS routes
• showCloseButton - dispay or not the close button (default true)
• closeOnEscape - close dialog by pressing escape key (default true)
• closeOnOverlayClick - close dialog by clicking on the overlay (default true)
• overlay - display overlay (default true)
• themeClass - theme css class name to add to modal window
• bodyClass - css class to add to body
• openingClass - css class to add to modal content while opening
• closingClass - css class to add to modal content while closing
• openingOverlayClass - css class to add to modal overlay while opening
• closingOverlayClass - css class to add to modal overlay while closing

===

.close()

Calling the .close method on an instance returned by the .open method will close the relative modal, calling the method on the $fancyModal service will close every opened modal.

===

.setDefaults(options)

You're able to set default settings through $fancyModalProvider:

var app = angular.module('myApp', ['vesparny.fancyModal']);
app.config(['$fancyModalProvider', function ($fancyModalProvider) {
	$fancyModalProvider.setDefaults({
		themeClass: 'fancy-modal-theme-default'
	});
}]);

Returns:

The open() method returns an object with some useful properties.

id {String}

This is the DOM ID of the modal which was just created.

close {Function}

This is a function which will close the modal opened before.

opened {Promise}

A promise which will resolve when the modal is fully loaded.

Example:

var modal = $fancyModal.open({
  templateUrl: 'template.html',
});
modal.opened.then(function() {
  modal.close();
});

===

Directive

By default $fancyModal module is served with fancy-modal directive which can be used as attribute for buttons, links, etc. All .open() options are available through attributes.

Example:

<button type="button"
	template-url="template.html">
	Open dialog
</button>

Events

Everytime when $fancyModal is opened or closed we're broadcasting three events (dispatching events downwards to all child scopes):

• $fancyModal.opened

• $fancyModal.closed

Example:

$rootScope.$on('$fancyModal.opened', function (e, $modal) {
	console.log('$fancyModal opened: ' + $modal.attr('id'));
});

$rootScope.$on('$fancyModal.closed', function (e, id) {
	console.log('$fancyModal closed: ' + id);
});

Themes

The project contains one theme that show how easily you can create your own. Check example folder for demonstration purposes.

References

Inspired by awesome Hubspot/Vex jQuery modals and ngDialog

Test

clone this repository then

npm install
npm install -g gulp
bower install
gulp test

Contributing

PR and issues reporting are always welcome :) see also CONTRIBUTING.md file.

License

See LICENSE.md file

Changelog

See CHANGELOG.md file