Autor Zpráva
Pietro
Profil
Dobrý den,
mám tuto funkci:

function load(kde, text){
  var d = document.getElementById(kde);
  if(!text) text = 'Nahrávám dokument...';
  d.innerHTML = '<div class="loading"><img src="/images/loading.gif" alt="" style="background-color: white"><br>'+text+'</div>'+d.innerHTML;
}


Ale potřebuju zajistit, aby uživatel v době, kdy se tento prvek zobrazuje (celé je to AJAX), aby se mu ztmavila obrazovka, jako u LightBoxu, nebo Greyboxu. Nemusí tam být animace, prostě jenom aby po volání funkce load() zšedla obrazovka (samozdřejmě mimo div.loading) a veškeré odkazy nebyly aktivní. Nemůžu na to nikde narazit, tak prosím poraďte...
DJ Miky
Profil
Vytvoříš si element s dostatečným z-indexem, černým pozadím, absolutní pozicí a rozměry 100 % / 100 % a nastavíš mu určitou průhlednost - opacity a filter:alpha (přesný zápis toho si nepamatuju, Google nebo hledání tady pomůže).
peta
Profil
Pietro
diskuse - tema
../ a hned tema pod tim, gray-box , pripadne light-box
jakpsatweb - css - filter
jakpsatweb - css
peta
Profil
DJ Miky
mozna bych to naznacil :)
<div style="position:relative;width:200px;height:200px;">
<div style="position:absolute;width:200px;height:200px;z-index:50;backgroun d:#000;"> neco</div>
<div style="position:absolute;width:100px;height:100px;z-index:100;backgrou nd:#fff;left:50px;right:50px"> neco</div>
</div>

2 objekty na sobe nezavisle prekryte z-indexem a pozicovanim pres sebe.
Pietro
Profil
To jsem pochopil, díky.
Teď jsem ve fázi, kdy mám vytvořen <div>, ve který mám roztáhlý width: 100%; height:100%;. Problém je ale, že je vysoký jen na výšku okna, nikoli na celou stránku (nepokryje celé <body>, když se scrolluje, je to vidět). Jo a IE vůbec width: 100%; height: 100%; nechápe, neroztáhne div vůbec. Dodávám ještě CSS:

#prehled .loading{
  text-align: center !important;
  background-color: white;
  color: black;
  padding: 10px;
  border: 2px solid #7A8694;
  width: 120px;
  _width: 150px;
  height: 45px;
  position: fixed;
  _position: absolute;
  left: 50%;
  top: 200px;
  clear: both;
}
#prehled .loadingopacity{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  Z-Idex: 100;
  background-color: black;
  filter: alpha(opacity=50);
  opacity: 0.5;
  -khtml-opacity: 0.5;
}
Pietro
Profil
Ještě mne napadlo, že bych mohl div roztáhnout přes JS. Neexistuje ale řešení v CSS?
peta
Profil
"Neexistuje ale řešení v CSS?"
proc ho hledas na foru v JS?
Problem je v tom, ze jsi nepochopil princip. 100% neceho muzes ziskat, pokud to ma vlastni souradny system, position:relative; pokud ne, pak 100% patri k nejblizsimu nadrazenemu objektu s touto vlastnosti, coz je shodou okolnost window nebo html a v nem se pak pres overflow zobrazuje body.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: