0

I am trying to do something like this in my jQuery:

$("#loading").show();

and here is the #loading div which I have as display:none at the bottom of the screen:

<div id="loading" style="display:none; ">
  <p><img src="img/ajax-loader.gif" /> Please Wait</p>
</div>

I realize that the .show() function just makes things appear, but how could I display this overlayed over the content of the screen since that div just has a .gif spinner icon that signals to the user to wait?

Nikola K.
  • 7,093
  • 13
  • 31
  • 39
Genadinik
  • 18,153
  • 63
  • 185
  • 284

1 Answers1

1

One of the way I do it is by creating a dialog box.

  $("#loading").dialog({
                    height: 140,  
                    width:160,
                    modal: true,
                    resizable : false, 
                    draggable : false,
                    closeOnEscape: false   //So that dont close on escape
                   });
$(".ui-dialog-titlebar").hide();   //No title bar
         $(".ui-dialog").css("padding","0px");  //Remove extra spacing

and removing it on ajax call end.

Other ways::

  1. Use JQUERY BLOCK UI PLUGIN
  2. Using CSS FIXED Position
Community
  • 1
  • 1
Ashish Gupta
  • 1,651
  • 14
  • 30
  • yeah I know it gets the dialog to render as a popup, but it has a background and a heading that I don't want to appear there. I need to just have the .gif file appear like a spinner image that signals to wait. – Genadinik Sep 23 '12 at 11:49
  • yes it got rid of the title bar, but somehow not the background. It there a way to make the background not show up? Thanks! :) – Genadinik Sep 23 '12 at 11:54
  • @Genadinik change .ui-dialog,.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background: yellow !important or something}​ – Ashish Gupta Sep 23 '12 at 11:56
  • I see - you mean to re-style them using css? – Genadinik Sep 23 '12 at 11:58
  • thank you - one last question...since I want the background to appear on all other dialogs, how can I make the background not show up using the jQuery JS? – Genadinik Sep 23 '12 at 12:09
  • you can change that dialog related css in your jquery.ui.css. so that it will be changed for each and every dialog box – Ashish Gupta Sep 23 '12 at 12:11