Question

我在div上有一个jquery Overlay。它工作得很好，除了当我展开和收缩窗口时，叠加层不会扩展和收缩。刷新页面后它会扩展和收缩，但它不会动态地执行。我有一些代码，我曾希望能解决这个问题。不幸的是它没有。这是我目前的......

function DemoSearchInternals()
{
    debugger;
    var form = $("#DemoGraphID");
    $div = $("#thatTable");
    //$loading = $('<img src="<%=Url.Content("~/images/ajax-loader.gif")%>" alt="loading" class="ui-loading-icon" style="display:none" id="img-load">');
    //$div.append($loading);
    var srlzdform = form.serialize();
    var PopID = <% =PopID %>;
    var options = [];
    var $url = $("#target").attr("action");
    $('<div id="overlay">').css({
        position: 'absolute',
        opacity: 0.2,
        top : $div.offset().top,
        left : $div.offset().left,
        width : $div.outerWidth(),
        height : $div.outerHeight(),
        background: 'blue url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo('body');
    $(window).resize(function(){
    //$div = $("#thatTable");
    $('<div id="overlay">').css({
            top: $div.offset().top,
            left: $div.offset().left,
            width: $div.outerWidth(),
            height: $div.outerHeight()
        }).appendTo('body');
    });

    //$('div#TabView1').html('<div id="overlay"><img src="<%=Url.Content("~/images/ajax-loader.gif")%>" alt="loading" class="ui-loading-icon"></div>');
    //div.append('<img src="<%=Url.Content("~/images/ajax-loader.gif")%>" alt="loading" class="ui-loading-icon">');
    //$loading.show();

    $("#overlay").fadeIn();
    $.post('<%:Url.Action("SearchByDemographic", "PatientACO")%>', srlzdform, function (data)
    {
       DisplayDemographicSearch(data);
       $("#overlay").fadeOut();
    });
}

我会继续浏览互联网寻找建议。谢谢你的帮助。

Answer 1

设置一个底部和右侧，而不是css中的宽度和高度（如果设计允许）。无论你有什么设计，这都会使窗户与边缘保持适当的距离。

如果您希望它不小于特定尺寸，请确保在元素上放置最小高度和最小宽度。

Answer 2

它可能会减慢一些问题，即如果你将它应用于许多元素，但是当我需要根据窗口大小调整大小时，我会使用$（window）.resize事件，这有可能成为一个令人头痛的问题。

前：

function setSize() {
    //Your code and everything affecting the resize depending on window width goes here
    //Exemple : 
    $("#mydiv").width($(window).width);
}

$(window).resize(function() {
    setSize();
});

Jquery Loading Overlay随窗口扩展和收缩

2 个答案: