loader timer using jQuery dialog

We have a gift and needed a loader display
I created a loader js module using jQuery dialog and it's coded to display when ajax calls start and then hide when ajax calls stop. Could make model by setting the dialog modal param to true.


var loadingTimer = (function() {
var $timer = $('#loadingHopup'),

init = function(){
_dialog();
_listeners();
},

show = function() {
$timer.dialog("open");
},

hide = function() {
$timer.dialog("close");
},

_dialog = function() {
$timer.dialog({
create: function (event, ui) {
$(".ui-widget-header").hide();
},
open: function() {
// allow safari/chrome users to use scrollbar
window.setTimeout(function() {
$(document).unbind('mousedown.dialog-overlay').unbind('mouseup.dialog-overlay');
}, 100);
},
close: function() {
},
dialogClass: 'noTitleDialog',
height: 200,
width: 200,
position: 'center',
autoOpen: false,
modal: false
});
},

_listeners = function() {
// show a timer for longer running calls
//
$("#loadingHopup").bind({
ajaxStart: function() { loadingTimer.show();},
ajaxStop: function() { loadingTimer.hide(); }
});

}

return {
init : init,
show : show,
hide : hide
}
})();


Then include the html on pages you need it

<div id="loadingHopup" class="loadingHopup">
    <img class="loadingHopupImage" src="/images/ajax-loader-lg.gif">
</div>


I also have a css class to hide the dialog title referenced as a dialog option (thanks Stackoverflow)

.noTitleDialog  .ui-dialog-titlebar {
display:none;
}




I did some experimenting with a homemade version having a div with the image in in then setting these styles on the div and image respectively. Instead of background-color a semi transparent png background would be better. However, the jQuery dialog is convenient and handles positioning etc as page is scrolled so I went with that.


.loadingHopup {
position:absolute;
top: 150px;
left: 150px;
height: 70%;
width: 70%;
z-index: 99;
background-color: white;
}
.loadingHopupImage {
position:absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
z-index: 101;
}