CODEWITHSUNDEEP
jquery
Genadinik
Genadinik

Reputation: 18639

jQuery - how do I make dialog background disappear with jQuery commands?

I am doing something like this to make the dialog appear, and display a .gif image which is basically a spinner to indicate to users to wait.

$("#loading").dialog({
                height: 140,
                width:160,
                modal: true,
                resizable : true,
                draggable : true,
                closeOnEscape: false
           });

$(".ui-dialog-titlebar").hide();   //No title bar
$(".ui-dialog").css("padding","0px");  //Remove extra spacing

This code displays the spinner, hides the title-bar but does not get rid of the background image so it looks awkward. Is there a way to get rid of the background using jQuery?

I do not want to mess with the css too much because I want the other dialogs to look standard.

Thanks!

Upvotes: 0

Views: 164

Answers (3)

Norberto Soriano
Norberto Soriano

Reputation: 309

This worked out for me:

jQuery UI:

$("#div_loading").dialog({
  autoOpen:      false,
  modal:         true,
  dialogClass:   "no-close",
  draggable:     false,
  resizable:     false,
  closeOnEscape: false,
  width:         "auto",
  height:        "auto"
});

//This removes the title bar
$(".ui-widget-header").css("background", "none");
$(".ui-widget-header").css("border", "none");

//This removes the background
$(".ui-widget-content").css("background", "none");
$(".ui-widget-content").css("border", "none");

NOTE: I use autoOpen: false because the dialog is only opened when a button is clicked.

HTML:

<div id="div_loading" >
  <img alt="" src="ajax-loader.gif">
</div>

Upvotes: 0

Muthu Kumaran
Muthu Kumaran

Reputation: 17910

I'm not sure which element has background images, here is the common way to get rid of background images

$(SELECTOR).css('background', 'none');

or

$(SELECTOR).css('background-image', 'none');

Upvotes: 2

David
David

Reputation: 2065

You can use

.dialog( "close" )

Reference:

http://jqueryui.com/demos/dialog/#method-close

Edit:

Unless you want it to still be shown, which means I misunderstood the question (Sorry). You can do something along the lines of to get no background:

jQuery UI dialog overlay

Upvotes: 1

Related Questions