Logo

Base Examples

Click below buttons to block below content area.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Inceptos imperdiet magna! Sed fusce fames tempus litora venenatis ad: 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 class="example-preview" id="kt_blockui_content">
...
</div>
// default
$('#kt_blockui_default').click(function() {
 KTApp.block('#kt_blockui_content', {});

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_content');
 }, 2000);
});

$('#kt_blockui_overlay_color').click(function() {
 KTApp.block('#kt_blockui_content', {
  overlayColor: 'red',
  opacity: 0.1,
  state: 'primary' // a bootstrap color
 });

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_content');
 }, 2000);
});

$('#kt_blockui_custom_spinner').click(function() {
 KTApp.block('#kt_blockui_content', {
  overlayColor: '#000000',
  state: 'warning', // a bootstrap color
  size: 'lg' //available custom sizes: sm|lg
 });

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_content');
 }, 2000);
});

$('#kt_blockui_custom_text_1').click(function() {
 KTApp.block('#kt_blockui_content', {
  overlayColor: '#000000',
  state: 'danger',
  message: 'Please wait...'
 });

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_content');
 }, 2000);
});

$('#kt_blockui_custom_text_2').click(function() {
 KTApp.block('#kt_blockui_content', {
  overlayColor: '#000000',
  state: 'primary',
  message: 'Processing...'
 });

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_content');
 }, 2000);
});

Modal Blocking Examples

Click below buttons to block modal.

<div class="modal fade" id="kt_blockui_modal_default" tabindex="-1" role="dialog"  aria-hidden="true">
...
</div>

<div class="modal fade" id="kt_blockui_modal_overlay_color" tabindex="-1" role="dialog"  aria-hidden="true">
...
</div>

<div class="modal fade" id="kt_blockui_modal_custom_spinner" tabindex="-1" role="dialog"  aria-hidden="true">
...
</div>

<div class="modal fade" id="kt_blockui_modal_custom_text_1" tabindex="-1" role="dialog"  aria-hidden="true">
...
</div>

<div class="modal fade" id="kt_blockui_modal_custom_text_2" tabindex="-1" role="dialog"  aria-hidden="true">
...
</div>
// default
$('#kt_blockui_modal_default_btn').click(function() {
 KTApp.block('#kt_blockui_modal_default .modal-dialog', {});

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_modal_default .modal-content');
 }, 2000);
});

$('#kt_blockui_modal_overlay_color_btn').click(function() {
 KTApp.block('#kt_blockui_modal_overlay_color .modal-content', {
  overlayColor: 'red',
  opacity: 0.1,
  state: 'primary' // a bootstrap color
 });

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_modal_overlay_color .modal-content');
 }, 2000);
});

$('#kt_blockui_modal_custom_spinner_btn').click(function() {
 KTApp.block('#kt_blockui_modal_custom_spinner .modal-content', {
  overlayColor: '#000000',
  state: 'warning', // a bootstrap color
  size: 'lg' //available custom sizes: sm|lg
 });

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_modal_custom_spinner .modal-content');
 }, 2000);
});

$('#kt_blockui_modal_custom_text_1_btn').click(function() {
 KTApp.block('#kt_blockui_modal_custom_text_1 .modal-content', {
  overlayColor: '#000000',
  state: 'danger',
  message: 'Please wait...'
 });

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_modal_custom_text_1 .modal-content');
 }, 2000);
});

$('#kt_blockui_modal_custom_text_2_btn').click(function() {
 KTApp.block('#kt_blockui_modal_custom_text_2 .modal-content', {
  overlayColor: '#000000',
  state: 'primary',
  message: 'Processing...'
 });

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_modal_custom_text_2 .modal-content');
 }, 2000);
});

Card Blocking Examples

Click below buttons to block this card.

<div class="card card-custom gutter-b" id="kt_blockui_card">
...
</div>
$('#kt_blockui_card_default').click(function() {
 KTApp.block('#kt_blockui_card');

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_card');
 }, 2000);
});

$('#kt_blockui_card_overlay_color').click(function() {
 KTApp.block('#kt_blockui_card', {
  overlayColor: 'red',
  opacity: 0.1,
  state: 'primary' // a bootstrap color
 });

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_card');
 }, 2000);
});

$('#kt_blockui_card_custom_spinner').click(function() {
 KTApp.block('#kt_blockui_card', {
  overlayColor: '#000000',
  state: 'warning', // a bootstrap color
  size: 'lg' //available custom sizes: sm|lg
 });

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_card');
 }, 2000);
});

$('#kt_blockui_card_custom_text_1').click(function() {
 KTApp.block('#kt_blockui_card', {
  overlayColor: '#000000',
  state: 'danger',
  message: 'Please wait...'
 });

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_card');
 }, 2000);
});

$('#kt_blockui_card_custom_text_2').click(function() {
 KTApp.block('#kt_blockui_card', {
  overlayColor: '#000000',
  state: 'primary',
  message: 'Processing...'
 });

 setTimeout(function() {
  KTApp.unblock('#kt_blockui_card');
 }, 2000);
});

Page Blocking Examples

Click below buttons to block this page.

$('#kt_blockui_page_default').click(function() {
 KTApp.blockPage();

 setTimeout(function() {
  KTApp.unblockPage();
 }, 2000);
});

$('#kt_blockui_page_overlay_color').click(function() {
 KTApp.blockPage({
  overlayColor: 'red',
  opacity: 0.1,
  state: 'primary' // a bootstrap color
 });

 setTimeout(function() {
  KTApp.unblockPage();
 }, 2000);
});

$('#kt_blockui_page_custom_spinner').click(function() {
 KTApp.blockPage({
  overlayColor: '#000000',
  state: 'warning', // a bootstrap color
  size: 'lg' //available custom sizes: sm|lg
 });

 setTimeout(function() {
  KTApp.unblockPage();
 }, 2000);
});

$('#kt_blockui_page_custom_text_1').click(function() {
 KTApp.blockPage({
  overlayColor: '#000000',
  state: 'danger',
  message: 'Please wait...'
 });

 setTimeout(function() {
  KTApp.unblockPage();
 }, 2000);
});

$('#kt_blockui_page_custom_text_2').click(function() {
 KTApp.blockPage({
  overlayColor: '#000000',
  state: 'primary',
  message: 'Processing...'
 });

 setTimeout(function() {
  KTApp.unblockPage();
 }, 2000);
});

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo