наложение javascript не покрывает всю страницу, когда div увеличивает высоту страницы

Question

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

Проблема в том, что когда появляется div, он все еще заполняется данными ajax.Таким образом, высота и ширина наложения bg уже установлены, но как только все данные загружаются в плавающий элемент div, он иногда толкает страницу вниз, так что высота увеличивается.Поэтому я не могу рассчитать высоту и ширину окна или документа, потому что плавающий div может быть еще не полностью загружен, и, как только он это сделает, он еще больше толкает экран вниз, в результате чего наложение bg не покрывает всю страницу.

Так, например, в коде это выглядит примерно так:

loadBoxContent = function(){
..DO AJAX HERE..
..PUT CONTENT INTO FLOATING DIV..
$('#floatDiv').show()
$('#darkOverlay').height($(window).height());

}

Я подтвердил это, добавив предупреждение, так что к тому времени, когда я нажал на предупреждение, наложение bgудалось рассчитать истинный размер страницы, и это выглядит нормально.Извините, если это звучит странно, но, надеюсь, вы получите то, чего я пытаюсь достичь.Я предполагаю, что это не слишком сложно, но я не смог понять это.Любая помощь будет оценена, я использую jquery.

Спасибо

Answer 1

Наложение;)

** Обновление, установка положения всех углов на 0 вместо использования ширины / высоты 100% **

$("<div/>")
 .css({
    position:"fixed", // ze trick 
    background:"#000",
    opacity:.5,
    top:0,
    bottom: 0,
    left:0,
    right: 0,
    zIndex: 2999 // everything you want on top, gets higher z-index
  })
 .appendTo("body");

Или установите вышеуказанные настройки CSS вТаблица стилей CSS (для прозрачности нужны кросс-браузерные хаки).

$("#dark-overlay").show();

Answer 2

Вот решение:

Плагин загрузки JQuery Show

Не пытайтесь изобрести колесо !!!

Вотдемо:

Загрузка демо

Теперь вам просто нужно создать основной контейнер div для вашей страницы и просто попросить этот простой плагин сделать это за вас.

Может быть, вы хотите прочитать исходный код плагина и узнать, как он работает ...