The lightest & fastest alternative to native browser popups.
- Zero dependencies: who needs jQuery/Prototype/Backbone for a simple popup library?
- Graceful degradation: If your browser is not supported, no worries, the same code will trigger the native popups instead.
- Ultra-light: only 1.89kB gzipped! Poppy's core logic is really small!
- Promises pattern: to handle users's inputs, just hook into Poppy's promises using the
.thenmethod. - .destroy() method: need to get rid of Poppy? It will get out of your way in the cleanest possible way.
- JS & basic CSS in the same file: The minimum CSS rules required for the scaffolding of the popups is pre-included in the
.jsfile (an extra CSS theme file needs to be supplied to adjust it to your tastes). - Theming via external file: no need to overwrite any CSS rule because the look doesn't match your property. The library comes with no theme at all. You are free to create you own or use the default one in the repo.
- Browser support: IE9+ and modern browsers only. This is more a design choice as making the library work on older browser would have brought its weight up significantly.
Check out the live demo here.
You only need to add 3 elements to the HTML document to get yourself started:
- Poppy's core logic:
<script src="path/to/poppy.min.js"></script>- a Poppy CSS theme:
<link rel="stylesheet" href="path/to/theme.css"/>- an initialization script:
var poppy = new Poppy(),
alert = poppy.alert("Watch out!"),
congratulate = poppy.alert("Congratulations!", "success"),
confirm = poppy.confirm("Do you copy?"),
prompt = poppy.prompt("What's you name", "Albert");
// Hook both success/failure handlers in one go.
confirm.then(fulfill, reject);
...
// Just hook the success handler.
confirm.then(function (promptValue?) {...});
...
// Just hook the failure handler.
confirm.then(null, function () {...});Your final HTML code should look like that:
<!doctype html>
<html lang="en">
<head>
<...>
<link rel="stylesheet" href="path/to/theme.css"/>
<script src="path/to/poppy.min.js"></script>
</head>
<body>
<...>
<script>
var poppy = new Poppy(),
confirm = poppy.confirm("Do you copy?");
</script>
</body>
</html>When creating a new instance of Poppy, a configuration object can be passed to the constructor. Supported options include:
| Name | Type | Description | Default value |
|---|---|---|---|
| theme | string | The name of the theme you would like to use. The lightbox container will have a class of the same name. | "default" |
For e.g. the code needed to setup a custom instance of Poppy with the darcula theme would be:
var poppy = new Poppy({
theme: "darcula"
});To build Poppy yourself, make sure you have Node.js and NPM working. Then, git clone this repository and:
cd to/Poppy/project
npm install
npm startEdit the files in the src directory and new assets will be automatically created in the build directory.
Fork, create a Pull Request and we'll review, discuss and merge it -- provided it's true to Poppy's spirit :-D.