Block UI

Use BlockUI to control user interactions temporarily by blocking specific elements, showing loading states, or preventing actions until a process completes.

Step 1: Install BlockUI

You can install BlockUI via yarn.

yarn add block-ui

Step 2: Include BlockUI Script

Add the BlockUI JavaScript file from your local libs folder:

<!-- BlockUI Library -->
<script src="../assets/libs/block-ui/jquery.blockUI.js"></script>

Step 3: Add HTML Structure

Add a button to trigger blocking and a target card that will be blocked.

<button type="button" class="btn btn-primary" id="blockui-trigger-1">Block</button>

<div class="card overflow-hidden" id="blockui-target">
    ...
</div>

Step 4: Initialize BlockUI with JS

Use the following script to block the target card when clicking the button.

"use strict";

$(function () {
    var target = "#blockui-target";
        ...
    });
});