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:

$('.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:

$('.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.