jQuery BlockUI Plugin

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>BlockUI</title>
  
    <script src=
    </script>
  
    <script src=
    </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>

chevron_right


Output:

Before BlockUI activated:

After BlockUI activated:

Default BlockUI:

BlockUI with custom message:

BlockUI with custom styling:

BlockUI Element Blocking:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.