JQuery Loading Overlay расширяется и сжимается с окном

Question

У меня есть JQuery Overlay над DIV. Это работает довольно хорошо, за исключением того, что когда я расширяю и сжимаю окно, оверлей не расширяется и не сжимается с ним. Он будет расширяться и сжиматься, как только я обновлю страницу, но динамически не будет. У меня есть некоторый код, который, я надеялся, решит проблему. К сожалению это не так. Вот что у меня сейчас ...

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

Это может немного замедлить процесс, например, если вы примените это ко многим элементам, но я использую событие $ (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();
});

Answer 2

установить снизу и справа, а не ширину и высоту в css (если позволяет конструкция).Это заставит окно сохранять правильное расстояние от краев, независимо от того, какой у вас дизайн.

Если вы хотите, чтобы оно не стало меньше определенного размера, обязательно укажите min-height и min- ширина элемента тоже.