popupS
Native Javascript Module to display beautiful popups. With react support!
Features
- Demo: http://chieforz.github.io/popupS
- Native Javascript / No jQuery dependency
- Built in CSS spinner for asynchronous dialogs
- Smart focus on form elements
- AMD support
Installation
The plugin can be used as a Common JS module, an AMD module, or a global.
Usage with Browserify
Install with npm, use with Browserify
> npm install popups
and in your code
var popupS = ; popupS;
For the basic styling and fade in and out to be working, you have to include the popupS.css in yout header.
Usage as browser global
You can include popupS.js directly in a script tag. For the basic styling and fade in and out to be working, you have to include the popupS.css.
For both files
popupS.js
andpopupS.css
is a minified productive version in it's corresponding folder.
How to use
Create a popup window:
popupS; // or popupS;
Here are multiple ways to create popupS:
Alerts
popupS;
Confirm
Confirm configuration involves the use of callbacks to be applied.
popupS;
Prompt
Prompts are used for asking a single question.
popupSprompt content: 'What is your name?' placeholder: '>>>' { ifval popupS; else popupS; };
Modal
With Modals you are in full control.
popupS;
there is some magic sugar involved. learn more about it here
Ajax
It can also work in asynchronous mode and retrieve content from external pages.
popupS;
Options
popupS;
Advanced Options
popupS;
DOM Generation
The plugin is using some special magic to generating DOM Elements.
popupS;
All attributes, that can be applied via javascript are availabe to use. For example, as you can see in the example above: Instead of using the regular "for"-attribute on the label element, we have to use the "htmlFor"-attribute.
Note: If an assigned attribute is not an valid HTML attribute, it gets assigned as an 'data-'* atribute.