jQuery UI Dialog individual CSS styling

Question

Hi all, I'm looking to style a modal dialog (using UI Dialog) with unique CSS that is separate from the traditional dialog, so in essence to have two jQuery dialogs that each look different.

I've styled one, for example,

<div id="dialog_style1" class="dialog1 hidden">One content</div>

and another

<div id="dialog_style2" class="dialog2 hidden">Another content</div>

Unfortunately I've noticed that using separate CSS to style parts of the dialog box, like

.dialog1 .ui-dialog-titlebar { display:none; }
.dialog2 .ui-dialog-titlebar { color:#aaa; }

doesn't work because .ui-dialog-titlebar does not have the class .dialog1, and I can't do an addClass either without breaking into the plugin.

An alternative would be to have an element like body have a unique class/id (depending on which one I want) but that would preclude having both dialogs in the same page.

Any ideas?

Thanks in advance!

Answer 1

You can add the class to the title like this:

$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');

Answer 2

Have you tried these?

#dialog_style1 .ui-dialog-titlebar { display:none; }
#dialog_style2 .ui-dialog-titlebar { color:#aaa; }

Best recommendation I can give for you is to load the page in Firefox, open the dialog and inspect it with Firebug, then try different selectors in the console, see what works. You may need to use some of the other descendant selectors.

Answer 3

The quick answer is based on another response on SO:

Run the following immediately after the dialog is called in the AJAX:

    $(".ui-dialog-titlebar").hide();
    $(".ui-dialog").addClass("customclass");

This applies just to the dialog that is opened, so it can be changed for each one used. Thank you everyone for your quick responses.

Answer 4

The standard way to do this is with jQuery UI's CSS Scopes:

<div class="myCssScope">
   <!-- dialog goes here -->
</div>

Unfortunately, the jQuery UI dialog moves the dialog DOM elements to the end of the document, to fix potential z-index issues. This means the scoping won't work (it will no longer have a ".myCssScope" ancestor).

Christoph Herold designed a workaround which I've implemented as a jQuery plugin, maybe that will help.