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.