Skip to content

👁️ A simple, powerful pure Javascript to block UI - برمجة بسيط وقوية بلغة جافا سكريبت نقية لحظر واجهة المستخدم

License

Notifications You must be signed in to change notification settings

vzool/block-ui.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Library Logo

block-ui.js

ar NPM version

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.

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

About

👁️ A simple, powerful pure Javascript to block UI - برمجة بسيط وقوية بلغة جافا سكريبت نقية لحظر واجهة المستخدم

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published