title: Fade in overlay in modal dialog
body: <p>I have a JQuery UI dialog which is modal and has a black background with 50% opacity.  Is it possible to make the background opacity fade from 0% to 50%?  If so, how?  Because currently it feels kind of like getting a punch straight to the face when a dialog is shown.</p>
  
  <p>FWIW, this is the CSS I'm using at the moment:</p>
  
  <pre><code>.ui-widget-overlay {
      background: black;
      opacity: 0.5;
      filter: alpha(opacity = 50);
      position: absolute;
      top: 0;
      left: 0;
   }
  </code></pre>