Angular Simple Popup


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.


Usage

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.


Demos

Static HTML

This is the most basic use, showing static HTML in a Simple Popup window.
Go to demo

Adding Functionality

This demo shows how to add functionality to a Simple Popup dialog.
Go to demo

HTTP Request

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


Reference

Control Classes

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

Popup Object Methods

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

Initialise and Reset Methods

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

Open Immediately

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>

Styling

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.


Blog Search

Side Widget Well

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore, perspiciatis adipisci accusamus laudantium odit aliquam repellat tempore quos aspernatur vero.