title: jQuery UI: How to use ui-widget-overlay by itself?
body: <p>I am trying to create an overlay, similar to the one that jQuery UI Dialog uses. I can create the overlay like this:</p>
  <pre><code>var $overlay = $('&lt;div class=&quot;ui-widget-overlay&quot;&gt;&lt;/div&gt;').hide().appendTo('body');
  
  //...later in my script
  $overlay.fadeIn();
  </code></pre>
  <p>But the overlay cuts off when I scroll down. I noticed that jQuery UI is setting the width and height on that div dynamically. So I would like to reuse this functionality instead of reinventing the wheel. How can I create an overlay like this, or reuse the one in jQuery UI?</p>
  <h2>Solution:</h2>
  <p>Set the width/height of the overlay to be the width/height of the document, then bind a function on the window resize event to adjust the overlay width/height to match the new document width/height:</p>
  <pre><code>$(document).ready(function(){
      var $overlay = $('&lt;div class=&quot;ui-widget-overlay&quot;&gt;&lt;/div&gt;').hide().appendTo('body');
  
      $('.trigger').click(function(){
          $('div').slideDown();
          $('.ui-widget-overlay').fadeIn();
          setOverlayDimensionsToCurrentDocumentDimensions(); //remember to call this when the document dimensions change
      });
  
      $(window).resize(function(){
          setOverlayDimensionsToCurrentDocumentDimensions();
      });
  });
  
  function setOverlayDimensionsToCurrentDocumentDimensions() {
      $('.ui-widget-overlay').width($(document).width());
      $('.ui-widget-overlay').height($(document).height());
  }
  </code></pre>
  <p>Note that whenever the height of the document changes (adding elements, animating elements that slide down, etc), you will need to resize the overlay.</p>