Hvordan lage en DIV fylle siden

Hvis du har sett "lys box" effekter på en webside, har du sannsynligvis sett en maksimert DIV element som fyller siden. Lett boksen ofte føre websider for å dimme når du klikker på en knapp. kan vises En pop-up vindu som inneholder en form når du klikker på knappen. DIV elementer er ideelle kandidater for lysbokser fordi du kan plassere andre elementer inni dem. For å prøve deg på å lage helsides divs, legge til en Javascript-funksjonen i koden som endrer dimensjonene på en DIV element.

Bruksanvisning

1 Åpne en webside dokument med Notepad eller en HTML-editor. Lim inn følgende kode i dokumentene hoveddel:

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

div Innhold

<< Innspill id = "Button2" type = "button" value = "Skjul DIV" onclick = "manageDIV ( 'myDIV1', 'hide')" />

</ Div>

<< Innspill id = "Button1" type = "button" value = "Fyll Page" onclick = "manageDIV ( 'myDIV1', 'stor')" />

Dette skaper en div hvis id er "myDIV1." Den DIV refererer CSS-klasse som heter "skjule". Knappen inne i div passerer ordet "skjule" til en Javascript-funksjon. "Fyll Page" -knappen utenfor DIV passerer ordet "store" til funksjonen.

2 Legg til følgende CSS-klasser for sidens hodedelen som vist nedenfor:

<Style type = "text / css">

.stor

{Visibility: synlig; position: absolute; display: block; top: 0; venstre: 0; height: 100%; width: 100%;

background-color: gul;

}

.gjemme seg

{Visibility: hidden; position: absolute; display: block; top: 0; venstre: 0; height: 100%; width: 100%;

background-color: gul;

}

</ Style>

Den ".big" class endrer DIV kulisser DIV høyde og bredde til 100%. Dette fører til at DIV å fylle siden. Den gule bakgrunnsfargen hjelper deg å se DIV ved testing. Den ".hide" class setter DIV synlighet tillegger "skjult".

3 Lim inn koden nedenfor inn i dokumentet manus seksjon:

funksjon manageDIV (div, classname) {

Var divObj = document.getElementById (div);

divObj.className = classname;

}

Denne Javascript-funksjonen kjøres når du klikker på en av knappene. Koden tildeler deretter ".big" eller ".hide" class til DIV avhengig av hvilken knapp klikket.

4 Lagre dokumentet og vise den i en nettleser. Klikk på "Fyll Page" -knappen. Den gule DIV fyller siden. Klikk på "Hide DIV" -knappen. DIV forsvinner.

Hint

• Dette eksempelet illustrerer en enkel lyskasse effekt med fargen gul. Plasser en semi-transparent GIF inni DIV hvis du ønsker å skape et mer dempet lys boksen effekt. Du kan maksimere en DIV av andre grunner også. Kanskje du ønsker å vise en skjerm full av bilder som blokkerer ut alt annet på siden. Bare plassere disse bildene inne i DIV, og de vil fylle siden også.
• Merk at "Hide DIV" -knappen vises på innsiden av DIV. Hvis det ikke var der, brukere kan ikke klikke på den knappen for å gjøre DIV forsvinne fordi DIV dekker alt på hele nettet siden når maksimert.