Angular Simple Popup is a dialog modal for use with angularJS. It allows multiple screens in the same dialog and is ideal for short user input forms.
Angular simple popup is available at github.com/john-craddock/angular-simple-popup.
Alternatively, run bower install angular-simple-popup --save-dev
To use Simple Popup, add the 2 files simple.popup.js
and simple-popup.css
to your project. Then, add the module jtcraddock.simplePopup
to your application. Simple Popup has no dependancies, other than angular itself.
This is the most basic use, showing static HTML in a Simple Popup window.
Go to demo
This demo shows how to add functionality to a Simple Popup dialog.
Go to demo
This is the most common use of Angular Simple Popup. It shows how a user can submit a form, with all the expected UX features.
Go to demo
You can add classes to your template HTML to control the Simple Popup dialog. When clicked, an element with one of these classes will produce an effect.
Class | Effect |
---|---|
popup-close | close the popup |
go-to-next | move to next screen |
go-to-prev | move to previous screen |
go-to-screen-x | move to screen x, where 1 <= x <= 5 |
If a popup object is specified, these methods are added to it. They allow the popup object to be controlled programmatically.
Method | Effect |
---|---|
open | open the popup |
close | close the popup |
goToNextScreen | go to the next screen |
goToPrevScreen | go to the previous screen |
goToScreen(x) | go to screen x, where x <=1 <= 5 |
If a method called init
or reset
is added to a popup object, it will be executed when the object is opened/closed.
Method | Executed |
---|---|
init | when the popup opens |
reset | when the popup closes |
If the attribute open-immediately
is added to a Simple Popup element, the popup will open immediately.
<span open-immediately simple-popup="path/to/template.html"></span>
Simple Popup includes 2 css files; simple-popup.css
and simple-theme.css
. The file simple-popup.css
is necessary and should be included on your page.
You may style the contents of the Simple Popup dialog any way you choose. The file simple-theme.css
contains an optional theme, used in the demos. This theme is deliberately neutral, consisting only of shades of grey. If you include simple-theme.css
, you should edit the colors to match your site's branding.
The other css files included in this demo, demo-site.css
, bootstrap.css
and blog-post.css
are to style the demo site, they are not part of the Simple Popup code.