jQuery UI: How to use ui-widget-overlay by itself?

I am trying to create an overlay, similar to the one that jQuery UI Dialog uses. I can create the overlay like this:

var $overlay = $('<div class="ui-widget-overlay"></div>').hide().appendTo('body');

//...later in my script
$overlay.fadeIn();

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?

Solution:

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:

$(document).ready(function(){
    var $overlay = $('<div class="ui-widget-overlay"></div>').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());
}

Note that whenever the height of the document changes (adding elements, animating elements that slide down, etc), you will need to resize the overlay.