title: jQuery UI Overlay Repeat Fix For "Auto" Dimensions
body: <p>A while ago, I had a problem with pop-up dialogs that had a height going beyond the background.  The translucent overlay stopped in the middle and everything underneath was black.  My friend fixed it for me.  He said:</p>
  
  <p>"For the dialog issue I used 900px for width and height.  There's no way to accomplish the fix purely with CSS because the values eventually get overwritten when the javascript is called to display the dialog.  What we need to do is after opening/creating the dialog is to resize the background overlay to the dimensions of the page.  You can see this in the index.html for bonus features."</p>
  
  <p>Unfortunately, this fix doesn't apply when the width and height are set to 'auto'.</p>
  
  <p>Can someone please help me here?  Thanks.</p>
  
  <pre><code>   $("&lt;div class='popupDialog'&gt;Loading...&lt;/div&gt;")
          .dialog({
              autoOpen: true,
              closeOnEscape: true,
              width: '900',
              height: '900',
              modal: true,
              title: 'Bonus Features',
              beforeClose: function(){   $(this).remove();   }
          }).load(url, function() {
              $(this).dialog("option", "position", ['center', 'center'] );
          });
  
  
          adjustJQueryDialogOverlay();
      }
  
      $(window).resize(function() {
          $(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
      });
  </code></pre>