Popoff

Popoff runs modals, tooltips, popups, dropdowns, confirms, notifiers, popovers, lightboxes, balloons, dialogs, alerts, overlays, sidebars etc. Demo.

Usage

import createPopup from 'popoff';

//create and show modal
var modal = createPopup({
	type: 'modal',
	content: `
		<h2>Blah</h2>
		<p>blah</p>
	`
});
modal.show();

//create and show dropdown
var dropdown = createPopup({
	target: '#menu',
	type: 'dopdown',
	content: document.querySelector('#content')
});
document.querySelector('#menu').click();

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 into
container: document.body || document.documentElement,

// show overlay, will be detected based off type
overlay: true,

// show close button
closable: true,

// close by escape
escapable: true,

// show tip
tip: false,

// animation effect, see effects in the demo page
effect: 'fade',

// additional style rules for popup
style: {}

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.update({
	target: this._target || this.target,
	side: this.side,
	align: this.align,
	within: window
});

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.