Se hai visto gli effetti di "light box" su una pagina Web, che probabilmente hai assistito un elemento DIV ingrandito che riempie la pagina. Light Box spesso causa di pagine Web per dim quando si fa clic su un pulsante. Dopo aver fatto clic sul pulsante, potrebbe essere visualizzato una finestra popup contenente un form. Gli elementi DIV sono candidati ideali per le scatole leggere perché è possibile inserire altri elementi al loro interno. Per provare a creare pagina intera DIVs, aggiungere una funzione JavaScript al codice che altera le dimensioni di un elemento DIV.
Istruzioni
1
Aprire un documento di pagina Web utilizzando blocco note o un editor HTML. Incollare il codice seguente nella sezione del corpo di documenti:
< div id = "myDIV1" class = "Nascondi" >
Contenuto del div
<< id di input = "Button2" type = "button" value = "Nascondere DIV" onclick="manageDIV('myDIV1','hide')" / >
< / div >
<< id di input = "Button1" type = "button" value = "Riempire la pagina" onclick="manageDIV('myDIV1','big')" / >
Questo crea un div con id è "myDIV1." Il DIV fa riferimento alla classe CSS denominata "Nascondi". Il pulsante all'interno del div passa la parola "nascondere" a una funzione JavaScript. Il pulsante "Compila pagina" fuori il DIV passa la parola "grande" alla funzione.
2
Aggiungere le classi CSS seguenti alla sezione head della pagina come illustrato di seguito:
< style type = "text/css" >
scappatoprima
{visibilità: visibile; posizione: absolute; display: block; top: 0; left: 0; height: 100%; width: 100%;
background-color: giallo;
}
nasconda
{visibilità: nascosto; posizione: absolute; display: block; top: 0; left: 0; height: 100%; width: 100%;
background-color: giallo;
}
< / stile >
Le modifiche di classe "scappatoprima" il DIV imposta il DIV height e width al 100%. In questo modo il tag DIV riempire la pagina. Il colore di sfondo giallo ti aiuta a vedere il DIV durante il test. La classe di "nascondere" imposta attributo di visibilità di DIV su "hidden".
3
Incollare il codice riportato di seguito nella sezione script del documento:
Function manageDIV (div, className) {
var divObj = document.getElementById(div);
divObj.className = className;
}
Questa funzione JavaScript viene eseguito quando si fa clic su uno dei pulsanti. Il codice assegna quindi la classe "scappatoprima" o "nascondere" al DIV a seconda del pulsante scelto.
4
Salvare il documento e visualizzarlo in un browser. Fare clic sul pulsante "Pagina di riempire". Il DIV giallo riempie la pagina. Fare clic sul pulsante "Nascondi DIV". Il DIV scomparirà.
Consigli & Avvertenze
- In questo esempio viene illustrato un effetto di semplice scatola luce utilizzando il colore giallo. Posto un semi-trasparente GIF all'interno del DIV se si desidera creare un più sommesso effetto scatola luminosa. È possibile ottimizzare un DIV per altri motivi. Forse si desidera visualizzare una schermata piena di foto che bloccano tutto il resto della pagina. È sufficiente posizionare le foto all'interno del DIV, e si riempirà la pagina come bene.
- Si noti che il pulsante di "Nascondere DIV" viene visualizzato all'interno del DIV. Se non c'era, gli utenti non potevano fare clic su tale pulsante per rendere il DIV scompaiono perché il DIV spazia su tutta la pagina Web quando ingrandita.