Изменение размера div при изменении размера страницы - PullRequest
Новая
       13

Изменение размера div при изменении размера страницы

1 голос
/ 12 ноября 2011

Я использую jquery для наложения оверлея на div, пока я жду, когда мой сервер вернется к моей таблице json, к которой я автоматически перехожу (есть две вкладки, когда вы делаете пост ajax на одной, таблице создается с использованием данных JSON из ответа сервера).

Кажется, все работает нормально.
Однако при изменении размера экрана оверлей остается неизменным.
Это не хорошо.

Этот оверлейный div должен изменить размер, когда кто-то сжимает или расширяет окно.
Я пробовал несколько разных вещей, включая публикацию здесь для переполнения стека.

Также я попытался прикрепить размер моего наложения div к функции $(window).resize внутри моей функции наложения.

По сути, установка атрибутов top, left, width и height css для свойств div.outerWidth(), outerHeight(), left, top.

Кажется, это не работает.

Есть идеи?

КОД для того, что я делаю 

        $('<div id="overlay">').css({
        position: 'absolute',
        opacity: 0.2,
        top : $div.offset().top,
        left : $div.offset().left,
        width : $div.offset().width,
        height : $div.outerHeight(),
        background: 'blue url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo('body');

Как вы можете видеть, я в значительной степени выполняю всю свою работу css внутри функции javascript. Полагаю, я мог бы делать все, что нужно для CSS, в таблице стилей, как вы, ребята, предлагаете, и просто добавлял и скрывал мой div для DOM. Я попробую.

Ответы [ 4 ]

2 голосов
/ 12 ноября 2011

Используйте width: 100%; и height: 100%; на оверлее div.

Ширина не проблема, будет работать как есть.
Высота немного сложнее, чтобы она работала, вам нужно иметь родителя оверлея div, чтобы иметь известную ширину. Таким образом, предполагая, что оверлейный div является прямым потомком body, потребуется следующее: 

html, body {
    height: 100%;
}

и затем на оверлейном диве.

Другая возможность состоит в том, чтобы установить следующее в div: 

.overlay {
    position: fixed;
    background: rgba(0,0,0,0.2);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

Вот пример

Обратите внимание, что position: fixed плохо работает с мобильными устройствами.

1 голос
/ 12 ноября 2011

для наложения: поместите его в корень DOM, где вы не используете overflow: hidden, например, после тега body 

body: position: relative
overlay: position: absolute, width: 100%, top:0, left: 0

и скрипт для высоты: 

$('overlay-selector').height($(document).height())

100% высота с CSS означает $ (window) .height (), поэтому вам нужно использовать скрипт.

1 голос
/ 12 ноября 2011

Как насчет чистого решения HTML / CSS? 

<div id="overlay"></div>

<style type="text/css">
  #overlay {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;

      background: #000000;
      background: rgba(0, 0, 0, 0.5);
  }
</style>

(Свойство background указано дважды для устройств с поддержкой и без поддержки css3; только демонстрация.)

0 голосов
/ 15 ноября 2011

Хорошие ответы коллеги по стеку переполнены энтузиастами. Недавно я решил проблему, просто прикрепив оверлей к правильному div, вместо того, чтобы пытаться наложить его на этот div и затем вычислить размер ... Вот что я сделал. Есть тонкое изменение, на которое я укажу. 

function MRNSearchInternals()
{
    //debugger;
    var form = $("#MRNSearch");
    $div = $("#TabView1");
    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: 'grey url(<%=Url.Content("~/images/ajax-loader.gif")%>) no-repeat center'
    }).hide().appendTo($div);    

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

Ранее я прикрепил оверлейный элемент div к «body». Теперь я присоединяю его к элементу div, который я ранее взял ... $ div ... Я знаю, почему это сработало, но наложение теперь увеличивается и уменьшается с размером окна. Любое понимание этих парней? Было бы здорово не только решить эту проблему, но я хотел бы узнать, почему проблема также была решена, чтобы я мог принять более обоснованное решение в следующий раз. Спасибо за все ваши комментарии.

...