How can we create loading window in dark background effect

We would like to place, dark background effect ( normally we are using for Images gallery. ) for Loading a page. Actually we have a HTML form, with textarea box and a submit button onl开发者_JAVA技巧y. We would simply getting the data from PHP through ajax. here we would like to implement Loading image with dark background effects. When a whole data will print on the screen then , the loading image with dark background back to the normal background.

Thanks

Rodger

Update :- Using this code for getting value from php file. I m beginner in Ajax/ JS, if anybody can give me the code structure, that's good for us.

var anchorUrl2 = 'script.php';
var anchorPars1 = 'sqt=abcsd';
var anchorAjax2 = new Ajax.Updater( 'div-id', anchorUrl2, { method: 'get', parameters: anchorPars1 });

---

• On form submit append a div to body tag
• Set this div's position to fixed, width and height to window's width and height
• Assign a semi-transparent black PNG as it's background
• Write a text inside saying 'Please wait'
• Use a callback function when ajax request done to remove this div

---

Try this, the code should be self explanatory. It's jquery code but you can take the idea out of it.

<script type="text/javascript>
  $(document).ready(function(){
    $("#contentToHideWhileLoading").hide();
    $("#contentToShowWhileLoading").show();
    $.get(url, {parameters: anchorPars1}, function(data){
        $("#placeToAppendTo").append(data.dataToAppend);
        $("#contentToShowWhileLoading").hide();
        $("#contentToHideWhileLoading").show();
        $("#placeToAppendTo").show(); // if it wasn't visible yet
    });
  });
</script>