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.

Backdrop

Class representing a Backdrop.

Parameters

• custom_options (optional, default {})

constructor

Create a Backdrop object.

Parameters

• custom_options BackdropOptions (optional, default {})

setOptions

Updates existing options.

Parameters

• custom_options BackdropOptions (optional, default {})

add

Adds element(s) to target elements.

Parameters

• element (Element | string) Reference to an element or CSS selector.

remove

Removes element(s) from target elements.

Parameters

• element (Element | string) Reference to an element or CSS selector.

set

Sets new target element(s).

Parameters

• element (Element | string) Reference to an element or CSS selector.

show

Shows backdrop. If element is provided, it is set before backdrop is shown.

Parameters

• element (Element | string)? Reference to an element or CSS selector.

hide

Hides backdrop.

destroy

Removes backdrop from document.

Bug reports, feature requests and contact

If you found any bugs, if you have feature requests or any questions, please, either file an issue at GitHub or send me an e-mail at [email protected].

License

Backdrop is published under the MIT license.