Javascript - css : tutorial definitivo per la creazione di overlay
Visto che questo è un tormentone trattato fino alla nausea, ho deciso di scrivere un tutorial definitivo per la creazione di overlay.
L’overlay è un livello al di sopra della pagina, che possiamo usare per sostituire gli scomodi popup.
Vediamo come crearne uno nella migliore maniera possibile; utilizzeremo html, css e javascript.
Punto 1 Markup HTML:
Il tag più semanticamente adatto per rappresentare un overlay è certamente div:
<div id="container-overlay"> Il motivo per cui creiamo due div è per fare in modo che l’overlay ( il div interno ) possa essere centrato nella pagina indifferentemente dalla sua dimensione.
<div id="overlay">
contenuto
</div>
</div>
Assegniamo ad ogni div un identificatore univoco affinchè ci si possa interfacciare ad essi sia con i selettori Css che col DOM.
Punto 2 Stile Css:
Vediamo come centrare il box:
body { margin:0px; padding:0px; }
#container-overlay {
position:absolute;
top:0px;
left:0px;
display:block;
width:100%;
height:1%;
text-align:center; /*per IE 5.5 o minore*/
background:transparent;
}
#overlay {
position:relative;
top:50px;
display:block;
margin:0px auto;
width:500px;
height:400px;
background:#ff0000;
}
La prima regola, applicata al body, annulla i margini e i padding applicati dai browser.
Il container overlay è un div con posizione completamente slegata dalla pagina che si estende per tutta la larghezza del body. Il text-align center serve per centrare i div all’interno di esso con IE5.5 o minore.
Per quanto riguarda l’overlay, l’unica nota da fare e sul margin; il valore auto centra automaticamente il div all’interno del container. Il valore background e top li ho messi giusto per farlo vedere.
Ora il box può essere personalizzato.
Punto 3 Javascript:
Ad esempio possiamo aggiungere dei tasti per chiudere o aprire il box al click di un link.
Questo link ovviamente va messo sull’overlay stesso: <a href="javascript:void(0);" onclick="document.getElementById('overlay').style.display='none'">Chiudi</a> Questo invece nella stessa pagina: <a href="javascript:void(0);" onclick="document.getElementById('overlay').style.display='block'">Apri</a>
Maggio 15th, 2007 at 11:38
Bella sta cosa, ma secondo te potrei utilizzarlo come boc di attesa, per esempio quando faccio una operazione su db, gli faccio aprire il div con una gif che carica, però a questo punto come faccio a dirgli , guarda l’inserimento in db è fatto ora puoi chiuderti????
Maggio 15th, 2007 at 15:43
Immagino che la chiamata al database sia fatta via ajax; in questo caso basta richiamare l’istruzione:
document.getElementById(’overlay’).style.display=’none’
alla fine della chiamata.
Maggio 17th, 2007 at 11:14
grazie mille!
sei un genio!
A.
Maggio 30th, 2007 at 10:04
ancora non ho imparato JS e AJAX…
uff manco tutto il php… ogni volta mi perdo nel mare di istruzioni esistenti… ogni volta vedo tutte le potenzialità e mi perdo… xD
tu quanto tempo hai dedicato al web?
io un anno tanto per capire cos’erano i db, siti statici e dinamici. un altro anno seriamente per poter confezionare un sito decente… ma resto ancora lento nel farli, però non uso cms e cosine prefatte (tranne forum). secondo te é un errore impiegare più tempo per fare cose da 0 quando la rete é tempestata di programmi e sorgenti?
grazie
Maggio 30th, 2007 at 12:53
Non è un male reinventare la ruota, anzi, è solo così che puoi imparare veramente un linguaggio.
Luglio 27th, 2007 at 08:47
ciao .. allora bello si ma funziona solo con div fissi .. nel senso se io nella mia pagina ho alre cose e voglio far comparire il div sopra tutto il resto, il tuo script non va tanto bene perche bisogna usare z-index e questo non ti permette di usare position:relative.. come fare ?