Overview
BlockUI blocks a target element with an overlay and a loading message using Metronic's KTBlockUI component.
Constructor
new BlockUI(element, message, firstBlock?)
| Parameter | Type | Default | Description |
|---|---|---|---|
element |
string | HTMLElement |
- | CSS selector string or HTMLElement to block. |
message |
string |
- | Message displayed during blocking. |
firstBlock |
boolean |
true |
If true, the element is blocked immediately after creation. |
Methods
| Method | Return | Description |
|---|---|---|
block() |
BlockUI |
Blocks the target element. |
release() |
BlockUI |
Releases the block. |
isBlocked() |
boolean |
Returns true if the element is currently blocked. |
destroy() |
void |
Destroys the BlockUI instance. |
Basic Example
Click the button to toggle blocking on the target element.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inceptos imperdiet magna! Sed fusce fames tempus litora venenatis.
Ac aliquet leo hendrerit taciti viverra? Nisl suscipit potenti accumsan quis ipsum purus cursus.
Suspendisse ultrices morbi in purus lectus dictum porta; Commodo penatibus nec.
<div id="target" class="rounded border p-10 mb-5">
Lorem ipsum dolor sit amet...
</div>
<button id="toggleBtn" type="button" class="btn btn-sm btn-primary">Block</button>
import {components} from 'metronic-extension';
const {BlockUI} = components;
const blockUI = new BlockUI('#target', 'Loading...', false);
document.querySelector('#toggleBtn').addEventListener('click', () => {
if (blockUI.isBlocked()) {
blockUI.release();
toggleBtn.textContent = 'Block';
} else {
blockUI.block();
toggleBtn.textContent = 'Release';
}
});
Auto-block Example
Set
firstBlock to true (default) to block the element immediately on creation. Click the button to create a BlockUI that auto-blocks and releases after 2 seconds.
This element will be blocked immediately when the BlockUI instance is created, and automatically released after 2 seconds.
<div id="target" class="rounded border p-10 mb-5">
Content to be blocked...
</div>
<button id="startBtn" type="button" class="btn btn-sm btn-primary">Start auto-block</button>
import {components} from 'metronic-extension';
const {BlockUI} = components;
// Blocks immediately on creation (firstBlock defaults to true)
const blockUI = new BlockUI('#target', 'Please wait...');
// Release after async work completes
await fetchData();
blockUI.release();