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.0npm install --save-dev vue-overlay@1
or include build/bundle.js
.
Usage
overlay = require"vue-overlay"Vue# or, when using bundle.js overlay = windowvueCompsoverlay
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 = Overlay = Overlayobjmethods { }
Changelog
- 2.0.0
now compatible with vue 2.0.0
Development
Clone repository
npm installnpm run dev
Browse to http://localhost:8080/
.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.