@fczbkk/backdrop NPM

Backdrop

JavaScript object that adds the ability to highlight elements in the document via backdrop.

How to use

Install the library via NPM:

npm install @fczbkk/backdrop --save

Then use in your project like this:

import Backdrop from '@fczbkk/backdrop';

// create instance of Backdrop object
var my_backdrop = new Backdrop();

// show backdrop around target element
my_backdrop.add('#myElement');
my_backdrop.show();

// hide the backdrop
my_backdrop.hide();

Documentation

default_options

Config object for Backdrop.

Properties

backdrop_class string "backdrop" Class name added to all backdrop elements.
z_index number 1000 Z-index added to all backdrop elements.
padding number 5 Size of padding around target elements, in pixels.
color string "#000000" Color of the backdrop elements.
opacity number 0.5 Opacity of the backdrop elements. Must be number between 1 (fully opaque) and 0 (no opacity).
hide_on_click boolean true If true, the backdrop will hide when user clicks on it.
cover boolean false If true, the target elements will be covered by invisible elements which will prevent user from clicking on them. The cover elements also react to click when hide_on_click is enabled.
watch boolean false If true, the backdrop will watch target elements and react to the changes in their position, size and/or visibility. This feature can have impact on performance, so it is turned off by default.
watch_interval number 500 Interval between checks when watching for changes, in milliseconds.
onShow Function Function to be called when backdrop is shown.
onHide Function Function to be called when backdrop is hidden.