QuickTip: Styling jqModal with blockUI and AJAX requests

This is just a quick tip how to style a jqModal window when we are loading contents via AJAX. There are two possibilites:

  • use ajaxText, but this sometimes is not handy if you have complex styled content from AJAX
  • use blockUI and style the jqModal to show only after the AJAX has been loaded.

My idea is to block the user interface with a “Please wait…” message and then to slide down nicely the jqModal and unblock the page. So, firstly, we add the styles to jqModal dialog:

?View Code TEXT
$('.dialog').jqm(
                ajax: '@href',
		modal: true,
		target: '#target',
		onLoad: function(h){
			h.w.css('opacity',0.8).slideDown();
		},
		onHide: function(h) {
			h.w.slideUp('slow');
			h.o.remove();
		}
);

Now we have a nice animated jqModal. Next, we are adding blocking behavior:

?View Code TEXT
$('.dialog').jqm(
                ajax: '@href',
		modal: true,
		target: '#target',
    	        onShow: function(h){ 
                  $.blockUI({ css: { 
                    border: 'none', 
                    padding: '15px', 
                    backgroundColor: '#000', 
                    '-webkit-border-radius': '10px', 
                    '-moz-border-radius': '10px', 
                    opacity: '.5', 
                    color: '#fff' 
                 } }); 
               },
		onLoad: function(h){
			h.w.css('opacity',0.8).slideDown();
                        $.unblockUI();
		},
		onHide: function(h) {
			h.w.slideUp('slow');
			h.o.remove();
		}
);

Et Voila, you’re done! Hopefully somebody will find this useful.

Leave a Reply