Vue-overlay NPM

vue-overlay

To mask out the background when a dialog / modal or similar is opened, a overlay is needed.

Demo

Features

singleton & z-index management to allow stacking
background doesn't move when scroll gets disabled

Used in

Install

npm install --save-dev vue-overlay
// vue@1.0
npm install --save-dev vue-overlay@1

or include build/bundle.js.

Usage

overlay = require("vue-overlay")(Vue)
# or, when using bundle.js
overlay = window.vueComps.overlay

For examples see dev/. If you need to reliable get the Vue instance, see vue-mixins/vue

{zIndex, close} = overlay.open(options)

zIndex - the z-index of the opened overlay - will be raised by 5 for each overlay
close(callHooks=true) - shortcut for overlay.close(options,callHooks) - options will be the same instance used for opening
Options

Name	type	default	description
opacity	Number	0.5	opacity of the overlay
dismissable	Boolean	true	is the overlay dismissable by click or ESC?
onBeforeOpen	Function	null	hook before open animation
onOpened	Function	null	hook after open animation
onBeforeClose	Function	null	hook before close animation
onClosed	Function	null	hook after close animation
allowScroll	Boolean	false	don't set `overflow:hidden` on body
color	String	"black"	background-color of the overlay
zIndex	Number	1000	minimum zIndex for the new overlay, cannot be lower than 1000

overlay.close(options=lastOverlay, callHooks=true)

options the options object which was used to open a overlay
callHooks set to false to suppress the calls of onBeforeClose and onClosed of that overlay

overlay.fade({el,opacity,cb})

overwrite to add a animation

el the div element of the overlay
opacity the target opacity of the opening/closing
cb a function which must be called when finished

vue-overlay is a singleton, so a fade function provided like this, will be used globally. Only do this once:

Velocity = require("velocity-animate")
Overlay = require("vue-overlay")
Overlay.obj.methods.fade = function ({el,opacity,cb}) {
  Velocity(el, {opacity: opacity}, {
    duration: 300,
    queue: false,
    easing: 'easeOutQuad',
    complete: cb
  })
}