title: jQuery dialog - how to use different styles for each dialog?
body: <p>I use jQuery UI dialog for different dialogs on a website. Now I wondered if there was an easy way to use different styles for different dialogs?</p>
  
  <p>E.g. alerts like "really delete..." should have a different style than other messages...</p>
  
  <p>Now, there are classes used in the dialog:</p>
  
  <pre><code>&lt;div id="dialog-confirm" title="Title of dialog"&gt;Text of dialog&lt;/div&gt;
  </code></pre>
  
  <p>However, the actual style is applied to <code>.ui-widget-header</code>, <strike>which I cannot find anywhere in the source text, so I guess jQuery replaces this at some point, is this true?</strike></p>
  
  <p>EDIT: from docs.jquery.com:</p>
  
  <pre><code>Sample markup with jQuery UI CSS Framework classes
  
  &lt;div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"&gt;
     &lt;div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"&gt;
        &lt;span id="ui-dialog-title-dialog" class="ui-dialog-title"&gt;Dialog title&lt;/span&gt;
        &lt;a class="ui-dialog-titlebar-close ui-corner-all" href="#"&gt;&lt;span class="ui-icon ui-icon-closethick"&gt;close&lt;/span&gt;&lt;/a&gt;
     &lt;/div&gt;
     &lt;div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog"&gt;
        &lt;p&gt;Dialog content goes here.&lt;/p&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  Note: This is a sample of markup generated by the dialog plugin, not markup you should use to create a dialog. The only markup needed for that is &lt;div&gt;&lt;/div&gt;.
  </code></pre>
  
  <p>What is the best way to be able to have different styles for different dialogs?</p>