preloader - szare przeźroczyste pokrycie strony, jak otrzymać taki efekt Opcje

[enigma]

chciałbym uzyskać taki efekt jak tu po wciśnięciu validate http://mattberseth2.com/ajax_modalpopup_pr...ss/default.aspx
szukałem w googlach, nie wiem może coś przegapiłem może o złe rzeczy pytałem
patrzyłem też w dokumentacji jQuery i nie doszukałem się czegoś takiego

[Zajec]

Zrób div z szarym tłem i opacity na 0.5, wypozycjonuj go absolutnie (top: 0; left: 0; right: 0; bottom: 0;) i gotowe.

[enigma]

hmm, mam tak

Kod

position:absolute;
background-color:gray;
text-align: center;
top: 0; left: 0; right: 0; bottom: 0;
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;

ale jak przewijam stronę to nie ma dalej szarego pokrycia, jest tylko na "pierwszym ekranie"
a wtym js co dałem link podczas przewijania, obrazek loading przesuwa się ładnie w dół, no i cała strona jest wypełniona

[fnx]

Ja zrobiłem to tak:

[HTML] pobierz, plaintext 
function get_max(){
 
var original_top=document.body.scrollTop;
document.body.scrollTop=1000000000;
var ret_var=document.body.scrollTop;
document.body.scrollTop=original_top;
return ret_var+window.innerHeight;
 
}
 
 
function img(){
document.getElementById('twoja_warstwa').style.height=get_max();
}
[HTML] pobierz, plaintext 

funkcja najpierw przesuwa dokument na koniec, sprawdza maksymalna wartosc przesuniecia, dodaje wysokosc ekranu i wraca do miejsca z kad zaczales

Co prawda obrazek sie nie przesuwa ale tlo pokrywa całość. Aby obrazek sie przesuwal musialbys wstawic dodatkowa funkcje powtarzajaca sie np co 50 ms sprawdzajac wartosc document.body.scrollTop i dodajac ja do oryginalnego polozenia obrazka

[phpion]

Spróbuj zmienić:

[HTML] pobierz, plaintext 
position:absolute;
[HTML] pobierz, plaintext 

na

[HTML] pobierz, plaintext 
position: fixed;
[HTML] pobierz, plaintext 

[slammer]

position: fixed;

Nie działa w IE więc musiałbyś jeszcze załączyć plik http://www.doxdesk.com/software/js/fixed.html który symuluje position: fixed; w IE. Osobiście używam tej metody i sprawdza się wyśmienicie.

[senor_d]

zrob tak:

Kod

<div id="loader"></div>
    
     #loader {
         position:fixed;
         z-index:9999;
         top:0px;
         left:0px;
         background:#fff;
         opacity:0.8; /* dla FF */
         filter:alpha(opacity=80); /* dla IE */
         width:100%;
         height:100%;
     }

Kod

<![if IE 6]>
     <style type=\"text/css\">
     /* tylko dla IE w naglowku strony */
     #loader {
         position:absolute;
         width:expression(document.documentElement.clientWidth + 'px');
         height:expression(document.documentElement.clientHeight + 'px');
         top:expression(offset = 0 + parseInt(document.body.currentStyle .
         paddingTop) + parseInt(document.body.currentStyle.marginTop),
         document.documentElement.scrollTop + offset + 'px');
     }
   </style>
     <![endif]>

u mnie działa

A jeśli by nie działalo to zmień na

Kod

<!--[if IE 6]>
     <![endif]-->

nie wiem dlaczego ale czasami robi to różnicę

[dmx]

A może zrób to thickbox(jquery)?