Popoff
Popoff runs modals, tooltips, popups, dropdowns, confirms, notifiers, popovers, lightboxes, balloons, dialogs, alerts, overlays, sidebars etc. Demo.
Usage
var createPopup = ; //create and show modalvar modal = ;modal; //create and show dropdownvar dropdown = ;document;
API
**`let popup = new Popup({type, effect, container, ...});`**
Create popup instance based on passed options.
// modal, dropdown, tooltip, sidebar work out of the box. Otherwise define custom options below. See demo for examples.type: 'modal' // target element that enables the popup, e.g. button.target: null // an element to place popup intocontainer: documentbody || documentdocumentElement // show overlay, will be detected based off typeoverlay: true // show close buttonclosable: true // close by escapeescapable: true // show tiptip: false // animation effect, see effects in the demo pageeffect: 'fade' // additional style rules for popupstyle: {}
**`popup.show(myButtonEl, () => {});`**
Show popup relative to the target element, invoke callback after animation end. Target and callback are optional.
**`popup.hide(() => {});`**
Hide popup, invoke callback after animation end. Callback is optional.
**`popup.update();`**
Update popup position, in case of resize etc. Optionally pass an options to redefine params.
popup;
**`popup.on('show', () => {});`**
Invoke callback on event, one of the following: show
, hide
, afterShow
, afterHide
, update
.
Credits
Popoff engages practices of old overlay-component and dialog-component, refined and mixed with modern ES6 and browserify component approaches. List of effects is taken from modal window effects article from codrops, so big thanks to them for awesome lib.
See also
- prama — settings page constructor.
- placer — place any element relative to any other element in any way.
- aligner — align elements set by one or other side.
Related
- dialogs — simple dialogs: alert, confirm etc.