Home

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

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)

Nametypedefaultdescription
opacityNumber0.5opacity of the overlay
dismissableBooleantrueis the overlay dismissable by click or ESC?
onBeforeOpenFunctionnullhook before open animation
onOpenedFunctionnullhook after open animation
onBeforeCloseFunctionnullhook before close animation
onClosedFunctionnullhook after close animation
allowScrollBooleanfalsedon't set overflow:hidden on body
colorString"black"background-color of the overlay
zIndexNumber1000minimum zIndex for the new overlay, cannot be lower than 1000

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

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

overwrite to add a animation

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

Development

Clone repository

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.