jQuery UI Dialog individual CSS styling

Question

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

Answer 1

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

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.