Estoy buscando un estilo de diálogo modal (usando el diálogo UI) con un CSS único que sea independiente del diálogo tradicional, así que en esencia, tengo dos diálogos jQuery que se ven diferentes.

He diseñado uno, por ejemplo,

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

y otro

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

Desafortunadamente, he notado que al usar CSS por separado para dar estilo a partes del cuadro de diálogo, como

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

no funciona porque.ui-dialog-titlebar no tiene la clase.dialog1, y no puedo hacer unaddClass ya sea sin entrar en el plugin.

Una alternativa sería tener un elemento comobody tengo una clase / id única (dependiendo de cuál quiero), pero eso evitaría tener ambos cuadros de diálogo en la misma página.

¿Cómo puedo hacer esto?