Come fare un DIV riempire la pagina

December 7

Se hai visto gli effetti "light box" a una pagina Web, probabilmente avete assistito ad un elemento DIV massimizzato che riempie la pagina. Light box sono spesso causa di pagine Web per dim quando si fa clic su un pulsante. Una finestra pop-up che contiene un modulo può essere visualizzato dopo aver fatto clic sul pulsante. elementi DIV sono candidati ideali per scatole di luce, perché è possibile inserire altri elementi al loro interno. Per provare a creare DIV a piena pagina, aggiungere una funzione JavaScript per il codice che altera le dimensioni di un elemento DIV.

istruzione

1 Aprire un documento di una pagina Web utilizzando il blocco note o un editor HTML. Incollare il seguente codice nella sezione documenti del corpo:

<Div id = "myDIV1" class = "nascondere">

div Sommario

<< Ingresso id = "Button2" type = "button" value = "Nascondi DIV" onclick = "manageDIV ( 'myDIV1', 'nascondere')" />

</ Div>

<< Ingresso id = "Button1" type = valore "pulsante" = "Fill pagina" onclick = "manageDIV ( 'myDIV1', 'grande')" />

Questo crea un div il cui id è "myDIV1." Il DIV fa riferimento alla classe CSS denominata "nascondere". Il pulsante all'interno del div passa la parola "nascondere" per una funzione JavaScript. Il pulsante "Fill pagina" al di fuori del DIV passa la parola "grande" per la funzione.

2 Aggiungere le seguenti classi CSS per sezione head della pagina come illustrato di seguito:

<Style type = "text / css">

.grande

{Visibilità: visibile; position: absolute; blocco di visualizzazione; top: 0; left: 0; height: 100%; width: 100%;

background-color: yellow;

}

.nascondere

{Visibility: hidden; position: absolute; blocco di visualizzazione; top: 0; left: 0; height: 100%; width: 100%;

background-color: yellow;

}

</ Style>

La classe ".big" cambia set del DIV l'altezza del div e larghezza al 100%. Ciò causa il DIV per riempire la pagina. Il colore di fondo giallo aiuta a vedere il DIV durante il test. La classe ".nascosto" imposta la visibilità del DIV attributo "nascosto".

3 Incollare il codice riportato di seguito nella sezione dello script del documento:

Funzione 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 poi la ".big" o di classe ".nascosto" al DIV a seconda del tasto premuto.

4 Salvare il documento e visualizzarlo in un browser. Fare clic sul pulsante "Fill pagina". Il DIV gialla riempie la pagina. Fare clic sul pulsante "Nascondi DIV". Il DIV scompare.

Consigli e avvertenze

  • Questo esempio illustra un semplice effetto di light box con il colore giallo. Posizionare un GIF semi-trasparente all'interno del DIV se si desidera creare un effetto light box più contenuta. È possibile ottimizzare un DIV per altre ragioni. Forse si desidera visualizzare uno schermo pieno di foto che bloccano tutto il resto della pagina. È sufficiente posizionare le foto all'interno del DIV, e saranno riempire la pagina pure.
  • Si noti che il pulsante "Hide DIV" appare all'interno del DIV. Se non fosse stato lì, gli utenti non potevano cliccare il pulsante per fare il DIV scomparire perché il DIV copre tutto su tutta la pagina Web quando ingrandita.