Overview

BlockUI blocks elements with overlays and loading indicators.

Reference

Instance Methods
Name Description
public constructor() Create a new instance of the BlockUI class.
Parameters:
  • element: string|HTMLElement|JQuery
    HTMLElement selector, element, or JQuery object.
  • message: string
    Message displayed during blocking.
  • firstBlock: boolean
    If true, it is blocked immediately after instance creation. Default is true. 
                    import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
const blockUI = new components.BlockUI(document.getElementById('target'), 'Loading...');

// Block #target element. Do not block initially.
const initiallyHiddenBlockUI = new components.BlockUI(document.getElementById('target2'), 'Loading...', false);
public block() Block.
Return:
  • BlockUI
                    blockUI.block();
public release() Unblock.
Return:
  • BlockUI
                    blockUI.release();
public isBlocked() Check if it is blocking.
Return:
  • boolean True if currently blocking, false if not.
                    blockUI.isBlocked();
public destroy() Discard the loading indicator. 
                      blockUI.destroy();

Basic

Click the below button to block the below content area.
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 data-ref="target" class="rounded border p-10 mb-10">
  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>
<button data-on-block data-ref="blockButton" type="button" class="btn btn-primary">Block</button>
            
              import {components} from 'metronic-extension';

// Get references to elements with data-ref attributes.
const ref = components.selectRef();

// Initialize the component and set up event listeners.
const blockUI = new components.BlockUI(ref.target, 'Loading...', false);

$('body').on('click', '[data-on-block]', () => {
  if (blockUI.isBlocked()) {
    // If currently blocking, unblock.
    blockUI.release();

    // Changed block button text.
    ref.blockButton.text('Block');
  } else {
    // If not currently blocking, block.
    blockUI.block();

    // Changed block button text.
    ref.blockButton.text('Release');
  }
});