相关疑难解决方法(0)

我正在尝试创建一个覆盖,类似于jQuery UI Dialog使用的覆盖.我可以像这样创建叠加层:

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

请注意,只要文档的高度发生变化(添加元素,向下滑动动画元素等),您就需要调整叠加层的大小.