Custom CSS scope and jQuery UI dialog themes

Question

I am using multiple jQuery UI dialog themes on a single page, and I have bug.

[jQuery 1.3.2] [jQuery UI 1.7.2]

Here is a screenshot (vs custom CSS scope):

Alone on the page 1)

vs native 2)

How can I fix this?

Answer 1

I hit the same problem today. It seems that any dialog you create is taken out of its current hierarchy and placed at the end of the body element, which means that it isn't covered by a custom CSS scope.

The "dialogClass" option is of no help as well, since it sets the class of the dialog element, but you need the dialog to be a descendant of an element with your custom class.

One way to make it work is to set the custom class on the body tag. That, however, means that the whole document is affected and you cannot use different themes on one page anymore.

The way I ended up with is a little workaround to put the dialog element back into an element with your custom scope. Presuming that there's a div with class "myCustomScope" that contains everything the custom theme should apply to; and the div with id "myDialogContent" that should become the dialog:

// Create the dialog, but don't open it yet
var d = $('#myDialogContents').dialog({
    autoOpen: false
    // Other dialog options
});
// Take the whole dialog and put it back into the custom scope.
d.parent('.ui-dialog').appendTo('.myCustomScope');
// Open the dialog (if you want autoOpen).
d.dialog('open');