Block UI
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 class="card-header">
<h3 class="card-title">Samples</h3>
</div>
<div class="card-body">
<img src="../assets/images/small/img-2.jpg" alt="Images" class="img-fluid h-52 w-100 rounded-2 object-fit-cover mb-4">
<h6>Sunset Over Manarola</h6>
<p class="text-muted">Perched on the rugged cliffs of Italy’s Cinque Terre, the village of Manarola offers breathtaking views of colorful houses and the shimmering Ligurian Sea.</p>
<button type="button" class="btn btn-primary">Click here</button>
</div>
</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";
$("#blockui-trigger-1").on("click", function () {
$(target).block();
});
});