jQuery UI：如何使用ui-widget-overlay？

我正在尝试创建一个类似于jQuery UI对话框使用的覆盖。我可以这样创建叠加层：

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

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

但当我向下滚动时，叠加层会切断。我注意到jQuery UI动态地设置该div的宽度和高度。所以我想重新使用这个功能，而不是重塑轮子。如何创建这样的叠加层，或者在jQuery UI中重用这样的叠加层？

解：

将覆盖宽度/高度设置为文档的宽度/高度，然后在窗口大小事件上绑定一个函数，以调整覆盖宽度/高度以匹配新的文档宽度/高度：

$(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());
}

请注意，每当文档的高度更改(添加元素，动画向下滑动的元素等)时，您将需要调整叠加层的大小。

<style type="text/css">
    * {Border:0;margin:0}
.ui-widget-overlay {
    BACkground: repeat-x scroll 50% 50% #AAA;
    opacity:0.3;
}

.ui-widget-overlay {
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
}

</style>
<script type="text/javascript">

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

        $(window).resize(function () {
            $overlay.width($(document).width());
            $overlay.height($(document).height());
        });
    });
</script>