jQuery UI Dialog individual CSS styling
css, dialog, jquery, jquery-ui, modal-dialog
Solution
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.)
Problem
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. How can I do this?