Blokowanie zawartości strony internetowej elementem div

Podczas tworzenia aplikacji webowej pojawiła się potrzeba zablokowania elementów strony na czas pobierania AJAX-a. Rozwiązaniem jest zastosowanie ukrytego diva, który w razie potrzeby zasłoni całą stronę.

W kodzie HTML umieszczamy odpowiedni element div:

<div id="ukrywanie"></div>

W arkuszu stylów CSS dla strony umieszczamy:

#ukrywanie{
width: 100%;
height: 100%;
top:0pt;
left:0pt;
display: none;
z-index: 1000000;
position: fixed;
background-image: url('pixel.gif');
}

Właściwość z-index ustawia porządek stosu dla elementu. Element z większą wartością z-index znajduje się zawsze przed innym elementem z mniejszą wartością, zakrywa element z mniejszą warością. Element z bardzo dużą wartocią, np. 1000000 zakryje wszystkie inne.

właściwość z-index działa jedynie dla elementów z ustawioną pozycją (np. position:fixed;)

pixel.gif to jednopikselowy przeźroczysty gif. Zastosowanie przeźroczystego gifa jako tła sprawia, że rozwiązanie sprawdza się także pod Intenet Explorerem. Bez background-image doskonale działa pod Firefoxem, ale nie pod IE.

Jeżeli chcemy dodatkowo uzyskać efekt tzw. firanek (zasłonięcie wyświetlanej strony półprzeźroczystą wartową) to do CSS-u dopisujemy:

opacity:0.3;
filter:alpha(opacity=30);
background-color: white

a właściwość background-image jest juz niepotrzebna.

Opacity działa prawidłowo w przeglądarce Mozilla Firefox, nie działa natomiast pod Internet Explorerem. Dla drugiej przeglądarki dodatkowo umieszczamy filter:alpha(opacity=30).

Wtedy CSS otrzymuje postać:

#ukrywanie{
width: 100%;
height: 100%;
top:0pt;
left:0pt;
display: none;
z-index: 1000000;
position: fixed;
opacity:0.3;
filter:alpha(opacity=30);
background-color:white;
}

Blokowanie strony uzyskujemy poprzez włączanie i wyłączanie elementu div o id "ukrywanie". Mogą temu posłuzyć następujące funkcje JavaScript:

function blokuj() {
document.getElementById( 'ukrywanie').style.display='block';
}

function odblokuj() {
document.getElementById( 'ukrywanie' ).style.display='none';
};