Высота наложения HTML для покрытия всей видимой страницы

Question

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

Я вызываю $ (element) .block (), и он отлично работает, но наложение распространяется только до текущего содержимого моей страницы. По мере того, как все больше контента загружается и добавляется на страницу, оверлей перемещается вместе с ним, и это выглядит немного уродливо. В идеале я бы хотел, чтобы он покрывал всю видимую область страницы с самого начала. Простой способ сделать это - установить большое значение высоты для наложения, например:

$(myElement).block({
        overlayCSS: {
            height: '10000px'
        }
 });

... но это создает полосу прокрутки! Как мне избежать этого и сделать его нужной высотой, чтобы она покрывала видимую страницу, но не увеличивала ее?

Answer 1

Используйте position: fixed; вместо position: absolute. Таким образом, наложение не будет перемещаться, даже если вы прокручиваете.

Answer 2

В XHTML элементы html и body не так волшебны, как в HTML. Элемент body не заполняет область просмотра (окно) автоматически, его размер не превышает его содержимое.

Чтобы элемент заполнил окно, сначала нужно, чтобы элементы html и body заполнили окно:

html, body { height: 100%; }

Затем вы можете использовать height: 100%; для элемента в теле, чтобы он покрывал всю высоту.

Answer 3

работал для меня! Я изменил absolute на fixed.

function showWaitPopup() {
  var obj = document.getElementById('bkdiv');
  if (obj) {
    obj.style.display = 'block';
  }
  return true;
}

showWaitPopup();

div.bkdiv {
  background-color: #000000;
  opacity: 0.6;
  filter: alpha(opacity=60);
  z-index: 2000;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 200%;
  display: none;
}

<div class="bkdiv" id="bkdiv"></div>

Answer 4

У меня сработал следующий код:

$("body").block({
  message: '<h2>Loading...</h2>',
  overlayCSS: {
    position: 'absolute',
    top: '0',
    bottom: '0',
    left: '0',
    right: '0'
  }
});

body {
  color: #004A6E;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Я использовал следующий пост в качестве ссылки: Сделать div 100% высоты окна браузера единственное изменение, которое я должен был сделать, это добавить левый и правый. Мое наложение покрывало только половину экрана.

Answer 5

Я сделал для вас полный пример, теперь вы можете использовать его в своем приложении и просто скрыть его после выполнения запроса ajax.

Нажмите здесь !

<div class="overlay"></div>
<div id="container">
    content Whatever you want even you can delete this container
<div>

Answer 6

Установите position на absolute и высоту на 100%.