jQuery BlockUI Plugin

Nowadays, asynchronous JavaScript is becoming more popular as we don?t require to reload the web page to update the data of the web page. We can use the AJAX request to fetch data from the database and update it on the web page without reloading it.

However, it always takes some minimal time to update the data, which can be either in milliseconds or seconds. It can be irritating for users to see the app is updating data, and users can think that the app is hanging while the app is fetching the data. So, In such cases, we can show a loading UI that can?t allow users to interact with the app.

The Jquery blockUI plugin allows us to block the UI with a nice loading screen, and we can stop users from interacting with the application. Also, we can set the web page or custom HTML as a loading UI using the plugin.

Syntax

Users can follow the syntax below to use Jquery?s block UI plugin to block and unblock the UI.

//Blocking the UI
$.blockUI();
//Unblocking the UI
$.unblockUI();

In the above syntax, we used the ?blockUI()? method to block the UI of the application and ?unblockUI()? to unblock the UI of the application.

Example 1

In the example below, we used the blockUI plugin via CDN. Whenever users click the block UI button on the web page, it will call the blockUI() function.

In the blockUI() function, we block the UI using the blockUI() method, and after that, we use the setTimeOut() method to unblock the UI after 2000 milliseconds using the unblockUI() method.

   
   


   
Using jQuery's blockUI plugin to block UI with a default message
   
Click on the below button to block UI
 
    Block UI 
   

Example 2

The example below demonstrates the custom blocking message using the blockUI plugin. Here, we passed the object containing a blockUI() method parameter. The object contains a message as a key and HTML as a value that we want to show on the blocking screen.

In the output, users can observe the custom message on the blocking screen.

   
   


   
Using the jQuery's blockUI plugin to block UI with a custom message.
   
Click on the below button to block UI.
    Block UI 
   

Example 3

In the example below, we demonstrated to add CSS to the custom blocking message and style it. We require to use HTML and CSS to represent any web page, and that?s what the block UI plugin allows us to do.

We can pass the object as a parameter of the blockUI() method, which can contain a message, and CSS as a key with the respected values. We can pass the HTML content of the web page as a value of the message and CSS as a value of the ?css? key.

In this way, we can show an attractive web page as blocking UI.

   
   


   
Using the jQuery's blockUI plugin to block UI with a custom message.
   
Click on the below button to block UI.
    Block UI 
   

Example 4

In the example below, we created input fields to take users' custom messages and block duration. In JavaScript, we access the value of inputs, and according to that, we show the blocking message and block the web page till a particular duration.

In the output, users can enter the custom block message and time duration and click on the button to see their choice of blocking message.

   
   


   
Using the jQuery's blockUI plugin to block UI with custom messages and custom CSS
   
Enter the custom blocking message and block duration.
   
 

    
 

    Block UI 
   

Users learned to use the block UI plugin to block the UI of web applications. It is useful to show blocking UI while updating the web page's data. Also, it allows us to customize the blocking message and duration.