how to set background images when jquery dialog ui is open()

Question

how to set background images when jquery dialog ui is open()

how can i set background images of html page in jquery

Answer 1

Your question is not entirely clear, however:

You can use .addClass to add a css class to an element. The css class can have a background image defined.

.sky
{
   background-image:url('sky.png');
}

$('#someElement').addClass('sky');

Answer 2

The jQuery UI Dialog won't prevent you from altering the page behind it with javascript, even if the dialog is modal.

The following will work:

$('body').css('background','url(path/to/your/image.jpg)')

If you want to set that background image when your UI Dialog opens, then you would bind to the dialog's "open" event, like so:

$( ".selector" ).dialog({
   open: function(event, ui) { ... }
});

or...

$( ".selector" ).bind( "dialogopen", function(event, ui) {
  ...
});

If you're experiencing trouble setting a new background image on the page, it may be that there's an element being styled on your page with a more specific CSS selector than you're providing. For instance, you may have a wrapper div nested just inside the body that has a background image, which would knock out the body tag's.

Answer 3

In jQuery UI, when the dialog box is open, the page background changed by setting the appropriate values of the ui-widget-overlay class. You can check the background by changing the background property or use other CSS properties..

You can use the css method which jQuery provides to modify the values