Repository files navigation

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

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

• side-nav
• modal

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

or includebuild/bundle.js.

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

For examples seedev/.If you need to reliable get theVue instance, seevue-mixins/vue

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

• options the options object which was used to open a overlay
• callHooks set tofalse to suppress the calls ofonBeforeClose andonClosed of that overlay

overwrite to add a animation

• el thediv 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})}

• 2.0.0
  now compatible with vue 2.0.0

Clone repository

npm installnpm run dev

Browse tohttp://localhost:8080/.

Copyright (c) 2016 Paul PflugradtLicensed under the MIT license.