title: JQuery Modal dialog without overlay
body: <p>I'm trying to show an "ajax loader dialog" that blocks the interface (modal) but has no overlay.</p>
  
  <p>This is how I initialize the dialog:</p>
  
  <pre><code>  $("&lt;div&gt;&lt;/div&gt;").dialog({
           modal: true,
           dialogClass: "noOverlayDialog",
           autoOpen: false, //opened later
           ...
    });
  </code></pre>
  
  <p>I added the following CSS to hide the overlay :</p>
  
  <pre><code>.ui-dialog.noOverlayDialog + .ui-widget-overlay { opacity: 0 !important; }
  </code></pre>
  
  <p>However, when I call <code>dialog("open")</code> the overlay flashes then disappears, as if I had hidden it using Javascript. Same effect using <code>display:none;</code> or <code>visibility:hidden</code>.</p>
  
  <p>To make sure it was the css removing the overlay and not something else, I removed the line of css and surely enough the overlay was now always visible.</p>
  
  <p>Why is this happening? I thought static CSS should not have this kind of behavior and the overlay should be hidden immediately without a flash.</p>
  
  <p>If I can't find an intuitive solution, perhaps an alternative would be to set modal option to false to prevent the overlay all together, and then write code to get the modal behavior. Either way, I need a working solution.</p>