jQuery UI Dialog estilo CSS individual

Eu estou olhando para o estilo de um diálogo modal (usando o diálogo de interface do usuário) com CSS exclusivo que é separado do diálogo tradicional, por isso, em essência, para ter dois diálogos jQuery que cada olhar diferente.

Eu estilizei um, por exemplo,

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

e outro

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

Infelizmente notei que usar CSS separado para estilizar partes da caixa de diálogo, como

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

não funciona porque.ui-dialog-titlebar não tem a classe.dialog1e eu não posso fazeraddClass ou sem invadir o plugin.

Uma alternativa seria ter um elemento comobody tenho uma única classe / id (dependendo de qual eu quero), mas isso impediria ter ambos os diálogos na mesma página.

Como posso fazer isso?

questionAnswers(8)

yourAnswerToTheQuestion