title: Custom style to jQuery UI dialogs
body: <p>I am trying to change jQuery UI dialog's default styles to something similar to this -</p>
  <p><img src="https://i.stack.imgur.com/Nuyls.jpg" alt="enter image description here" /></p>
  <p>I got it to close changing some CSS in jQuery UI.</p>
  <pre><code>.ui-widget {
      font-family: Verdana,Arial,sans-serif;
      font-size: .8em;
  }
  
  .ui-widget-content {
      background: #F9F9F9;
      border: 1px solid #90d93f;
      color: #222222;
  }
  
  .ui-dialog {
      left: 0;
      outline: 0 none;
      padding: 0 !important;
      position: absolute;
      top: 0;
  }
  
  #success {
      padding: 0;
      margin: 0; 
  }
  
  .ui-dialog .ui-dialog-content {
      background: none repeat scroll 0 0 transparent;
      border: 0 none;
      overflow: auto;
      position: relative;
      padding: 0 !important;
  }
  
  .ui-widget-header {
      background: #b0de78;
      border: 0;
      color: #fff;
      font-weight: normal;
  }
  
  .ui-dialog .ui-dialog-titlebar {
      padding: 0.1em .5em;
      position: relative;
          font-size: 1em;
  }
  </code></pre>
  <p>HTML :</p>
  <pre><code>&lt;div id=&quot;popup-msg&quot;&gt;
      &lt;div id=&quot;loading&quot;&gt;
          &lt;h2&gt;Loading...&lt;/h2&gt;
          &lt;h3&gt;Please wait a few seconds.&lt;/h3&gt;
      &lt;/div&gt;  
      
      &lt;div id=&quot;success&quot; title=&quot;Hurray,&quot;&gt;
          &lt;p&gt;User table is updated.&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://jsfiddle.net/qP8DY/23/" rel="nofollow noreferrer">THIS IS FIDDLE</a></p>
  <p>But when I add this style its apply to all my dialogs. Can anybody tell me how can I avoid from this problem.</p>
  <p>Thank you.</p>