dy/popoff

Create popups, dropdowns, tooltips and sidebars

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.

popoff's Issues

Tip issues

• z-align - now tip is always over other elements, in case of multiple overlays
• align dropdown’s tip relative to target
• iphones render thin empty gap between tip and a menu

mobile issues

Just test on iphone an you will see. Weird padding top in modals, no scroll for just-me, hanging forever tooltips, no draggable, tall popups dont apply overlay. That is nogo for biloba.

Firefox aligns popup badly

It places modals to the left side.
Probably we could find a way centrize stuff without js. Some wrappers - anyways we need them for effects.

Drag and resize placement

It is now placed wrongly. You should whether read translation before or sort something out with alignment.
Or just leave it hoping you will never need movable popups.

Drop-in script

To use on various websites, along with zenscroll or aos.js, just include css/js and

<a href="#menu" data-popoff="menu" data-popoff-speed="1000">≡</a>

<nav id="menu" data-popoff-type="dropdown" hidden>...</nav>

Add types

Manage basic types

• dropdown
• tooltip

Morph effect

An explanatory effect https://github.com/codrops/ButtonComponentMorph

Improvements and thoughts for 3.0

• Balance effects - now they are too different.
• Add some more effects, especially with body content shift, or modal content delay.
• Work on overlay styles. Minimal ideas - moire, blur.
• Mobile minor bugs, like questionable margin-top where there should be centered alignment.
• Elaborate and add types. Dialog, confirm, notifier at least.
• Drag-resize is quite crappy now. It should be flawless.
• Leave placing logic for dropdowns/popups only, manage modals with css. As it is done in vex.
• Add main content displacements, in conjunction with effects.
• Make animation class, removing messiness of effects.
• Stacked placement? Like notifiers, vex, etc.
• Enable single option

Or possibly fuck it? If user needs special purpose popup - it is way better to create it from scratch, like drag/resize, windows, etc. This repo is really for prototype-quelity popups, just to up and run.

Fix tall modal

Now it is broken on scroll

IE has no promises

Therefore it fails to run demo

Mobile enhancemnts

• For tall modals make close button position sticky.
• Avoid overlay maybe.
• For sidebars make actual shift of main body - that is miserable how thin they are, width should be in pixels.

Add some effects

• zoom-in, -out
• slide-top/bottom/left/right

Really basic