Awesome
DEPRECATED see cerijs
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 overlayclose(callHooks=true)
- shortcut foroverlay.close(options,callHooks)
- options will be the same instance used for openingOptions
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 overlaycallHooks
set tofalse
to suppress the calls ofonBeforeClose
andonClosed
of that overlay
overlay.fade({el,opacity,cb})
overwrite to add a animation
el
thediv
element of the overlayopacity
the target opacity of the opening/closingcb
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
})
}
Changelog
- 2.0.0
now compatible with vue 2.0.0
Development
Clone repository
npm install
npm run dev
Browse to http://localhost:8080/
.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.