Poppy is a popups provider. With poppy you can easily use any basic kind of popup or build your own popup as well. Demo.
Kinds of popups:
- Overlay
- Tooltip
- Dropdown
- Notifier
- Popover
- Modal
Grab the latest version or CDN. Insert script on the page:
<script src="cdn_url/poppy.js"></script>Poppy is also available as a component for browserify, component or duo:
$ npm install poppy
var Dropdown = require('poppy/dropdown');
var Tooltip = require('poppy/tooltip');Create new instance:
var dropdown = new Dropdown({
target: document.querySelector('#dropdown'),
content: '<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>',
contentType: 'html'
});| Parameter | Type | Default | Description |
|---|---|---|---|
target |
selector, Element, NodeList, undefiend |
undefined |
A target or list of targets which by click show the popup container. Can vary depending on poppy type. |
content |
string, Element, function | undefined |
Content to show within the container. If function defined—it will be invoked and result considered as content. |
contentType |
string | element |
|
containerClass |
string | '' |
A class to add to the popup container |
holder |
selector, Element | <body> |
A holder of container |
tip |
'top', 'left', 'bottom', 'right', undefined |
false |
Show tip — a little triangle on the edge of the container. |
tipAlign |
string, number | 'center' |
Tip alignment relative to the container. |
single |
bool | false |
Hide other containers when this one becomes visible |
| Property/method | Type | Default | Description |
|---|---|---|---|
show(target) |
Make the container visible. | ||
hide() |
Make container disappear. | ||
enable() |
Make container active. | ||
disable() |
Disable any interactions. | ||
container |
Visible poppy container. | ||
state |
Current state of poppy: closed, opened, opening, closing, disabled. |
| Name | Description |
|----|----|----|----|
| beforeShow | Called when container is going to show |
| show | |
| beforeHide | |
| hide | |
| enable | |
| disable | |
MIT