jQuery BlockUI Plugin - GeeksforGeeks

10 Jul, 2020
The BlockUI plugin is used to simulate synchronous AJAX behavior. When activated, it stops the user from interacting with the page until it is deactivated. The DOM (Document Object Model) is added with elements to give a nice user-interface look and feel along with behavior.
Download Link:
<script src="https://malsup.github.io/jquery.blockUI.js"></script>

Syntax: For blocking the UI
$.blockUI(); 

For unblocking the UI
$.unblockUI(); 

When we call blockUI without parameters, it displays a “Please wait” message on the screen. We can change the messages by adding parameters to it. To block only an element and not the whole page, we have to make a slightly different call, block and unblock. To get a better understanding, let us see a basic example.
Example:
<!DOCTYPE html><html>  <head>    <title>BlockUI</title>      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>      <script src=        "https://malsup.github.io/jquery.blockUI.js">    </script>      <style>        .btn {            background-color: white;            color: black;            padding: 14px 28px;            font-size: 16px;            cursor: pointer;            margin-bottom: 3rem;        }          .success {            border-color: #4CAF50;            color: green;        }          .success:hover {            background-color: #4CAF50;            color: white;        }    </style></head>  <body>    <button class="btn success" id="blockd">        BlockUI default</button>    <br>    <button class="btn success" id="blockm">        BlockUI with custom message</button>    <br>    <button class="btn success" id="blocks">        BlockUI with custom style    </button>    <div id="blockel">        <button class="btn success" id="blocke">            BlockUI Element Blocking</button>    </div>    <div id="message" style="display: none;">        <h1>Loading ...</h1>    </div>      <script>        $(document).ready(function () {            $("#blockd").click(function () {                  // Default blockUI code                $.blockUI();                setTimeout(function () {                      // Timer to unblock                        $.unblockUI();                }, 3000);            });              $("#blockm").click(function () {                  // blockUI code with custom message                $.blockUI({ message: $('#message') });                setTimeout(function () {                    $.unblockUI();                }, 3000);            });              $("#blocks").click(function () {                $.blockUI({                      // blockUI code with custom                     // message and styling                    message: "<h3>GeeksForGeeks loading...<h3>",                    css: { color: 'green', borderColor: 'green' }                });                setTimeout(function () {                    $.unblockUI();                }, 3000);            });              $("#blocke").click(function () {                $("#blockel").block({                                              // BlockUI code for element blocking                    message: "<h3>GeeksForGeeks loading...<h3>",                    css: { color: 'green', borderColor: 'green' }                });                setTimeout(function () {                    $("#blockel").unblock();                }, 3000);            });        });    </script></body>  </html>
Output:
Before BlockUI activated:
After BlockUI activated:
Default BlockUI:
BlockUI with custom message:
BlockUI with custom styling:
BlockUI Element Blocking:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
jQuery-UI
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?