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);
       });
             

Notifications 24 New

Quick Actions finance & reports

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