jQuery UI Dialog individual CSS styling jQuery UI Dialog individual CSS styling jquery jquery

jQuery UI Dialog individual CSS styling


The current version of dialog has the option "dialogClass" which you can use with your id's. For example,

$('foo').dialog({dialogClass:'dialog_style1'});

Then the CSS would be

.dialog_style1 {color:#aaa;}


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.

(This quick answer is based on another response on Stack Overflow.)


This issue turned up for me when I was trying to find a similar answer. Consider:

    $('.ui-dialog').wrap('<div class="abc" />');    $('.ui-widget-overlay').wrap('<div class="abc" />');

Where abc is the name of your 'CSS wrapper' - see Stack Overflow question Custom CSS scope and jQuery UI dialog themes where I found the answer from Evgeni Nabokov. For more information on the CSS wrapper in use with a jQuery UI dialog box - see the following (but note they do NOT really solve the issue of the CSS wrapper with the dialog box - you need the above comments to help there, Using Multiple jQuery UI Themes on a Single Page (Filament blog).