Package Exports

block-ui.js
block-ui.js/block-ui.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (block-ui.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

block-ui.js

A simple 39 line of code, yet powerful plug-in written in pure Javascript to display a waiting page that prevents the user from interacting with all or part of the page while a background process or processes are executing.

Screenshot

You can change everything, started with the loader gif, background color, text color and the message. This applies to all or part of a page. So, you can use it in any project, even if it's a simple static html page.

Examples https://vzool.github.io/block-ui.js

Installation

NPM

npm install block-ui.js

Yarn

yarn add block-ui.js

CDN

<script src="https://unpkg.com/block-ui.js"></script>

Usage

Import

import 'block-ui.js';

Initialize

document.vzool_blockui_image = 'https://i.imgur.com/3g7OaQx.gif'; // or local file like loader.gif
document.vzool_blockui_background = '#121111'; // optional
document.vzool_blockui_color = '#ffffff'; // optional

Block UI

There should be an element with id identifier in the page to block it with loader gif and background color set in document.vzool_blockui_background and document.vzool_blockui_color variables above.

BlockUI("container").show(); // not #container

Block UI Status

BlockUI("container").blocked(); // true or false

Update Messages

BlockUI("container").message("<h1 style='padding-top: 190px;'>Loading...</h1>"); // set message
BlockUI("container").message(); // clear the message

You can use padding-top or padding-bottom to move the message up or down accordingly, so it is HTML content, you can update with anything which is HTML valid.

Note: it should be initialized with calling show() method first, otherwise it will not work and just return false.

Unblock UI

BlockUI("container").hide();

API Documentation

Name	Type	Parameter	Default	Description
`BlockUI()`	constructor	`id`	-	Create a new instance
`show()`	method	-	-	Show the block UI
`hide()`	method	-	-	Hide the block UI
`blocked()`	method	-	-	Check if the block UI is shown
`message()`	method	`message`	-	Set or clear the message
`document.vzool_blockui_image`	variable	-	`loader.gif`	Set or clear the image
`document.vzool_blockui_background`	variable	-	`#121111`	Set or clear the background
`document.vzool_blockui_color`	variable	-	`#ffffff`	Set or clear the color

For more information, please read the source code.

References

License

ISC License