Overlay loading image

Overlay loading image

by santosh_patnala

HTML

<div style="z-index: 1001;" class="ui-widget-overlay" id="overlay"></div>
<div id="PleaseWait" style="">
    <img src="http://placehold.it/350x150">
</div>

CSS

#overlay {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9999;
}

#PleaseWait {
    background: none repeat scroll 0 0 #ffffff;
    height: 36px;
    left: 50%;
    position: fixed;
    top: 50%;
    width: 36px;
    z-index: 99999;
}

JavaScript

$(document).ready(function () {
    $('#overlay').css("height", $(document).height());
});

$("#overlay, #PleaseWait").show();
$("#overlay, #PleaseWait").hide();


< form id = "addVersion_form"
action = ""
method = "post"
class = "form-horizontal"
onsubmit = "var return_value=validatedate('dp3','dp4'); if(return_value){  fnoverlay(); }else{ return false; }" >