Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Group-chat Created with Sketch.
Sean UX Designer
S

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

Recent Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%

Shopping Cart

iBlender The best kitchen gadget in 2020
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMax Professional camera for edge cutting shots
$ 150 for 3
4D Printer Manufactoring unique objects
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7
System Messages
Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$
Notifications
Stockholm-icons / Home / Library Created with Sketch.
Another purpose persuade Due in 2 Days
+28%
Stockholm-icons / Communication / Write Created with Sketch.
Would be to people Due in 2 Days
+50%
Stockholm-icons / Communication / Group-chat Created with Sketch. -27%
Stockholm-icons / General / Attachment2 Created with Sketch.
The best product Due in 2 Days
+8%
Customer Care
Reports
Memebers
Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo