Hvordan lage egendefinert popup-bokser med Javascript

January 9

En av de beste måtene å lansere unike, tilpassede popup bokser er å bygge en pop-up generator. En Javascript-funksjon som skaper en tilpasset popup-kommandoen kan redusere programmering tid. Ved å endre noen variabler som påvirker en pop-up størrelse og funksjonalitet, kan du passere disse variablene til popup generator funksjon. At funksjonen vil behandle variablene og lage en "åpen" metode som lanserer pop-up.

Bruksanvisning

1 Start din HTML editor og åpne et HTML-dokument.

2 Finn dokumentets "kroppen" delen, deretter lim inn følgende HTML-kode:

Dette skaper en knapp som kaller pop-up generator når den klikkes.

3 Flytt til dokumentets "head" -seksjonen, og legge til denne "script" code hvis det ikke finnes:

</ Script>

4 Legg disse variabeldeklarasjoner under den første "script" tag:

Var URL = "http://www.whitehouse.gov";

Var height = "400";

Var width = "600"

Var top = "200";

Var venstre = "300";

Sett verdien av "URL" variabel til en URL du vil. Hvis du ikke endrer det, vil pop-up display Det hvite hus nettstedet som et eksempel. Høyde og bredde variabler definere pop-up høyde og bredde. "Topp" og "venstre" fortelle leseren hvor langt å plassere pop-up fra toppen av skjermen og skjermens venstre kant. I dette eksemplet vil pop-up vises 200 piksler fra toppen og 300 piksler fra venstre. Høyde og bredde verdier er også i piksler.

5 Legg disse variabeldeklarasjoner under det som er vist i forrige trinn:

Var scrollbars = "1"; /

Scrollbar /

Var verktøylinjen = "1"; / Verktøylinje /

Var plassering = "1"; / Plassering bar /

Var menylinja = "1"; / Menylinjen /

Var status = "0";

Var resizeable = "1" / tillate brukeren å endre størrelsen på vinduet /

Disse variablene kan du vise eller skjule ulike leser komponenter. Hvis en variabel er "1," komponenten vises. Hvis verdien er "0" nettleseren ikke viser den aktuelle komponenten. I dette eksempelet, vil nettleseren vise menylinjen fordi verdien av "menylinje" er "1" Nettleseren vil skjule statuslinjen fordi "statuslinjen" variabelverdi er "0" Justere disse verdiene slik du liker å tilpasse pop-up utseende.

6 Lim inn følgende Javascript-funksjonen etter koden beskrevet i siste avsnitt:

funksjon popUpGenerator () {

Var popUpString = '';

popUpString + = 'height =' + høyde;

popUpString + = ', width =' + bredde;

popUpString + = ', topp =' + toppen;

popUpString + = ', venstre =' + venstre;

popUpString + = ', scrollbars =' + scrollbars;

popUpString + = ', verktøylinjen =' + verktøylinjen;

popUpString + = ', plassering =' + plassering;

popUpString + = ', menylinja =' + menylinja;

popUpString + = ', status =' + statuslinja;

popUpString + = ', resizable =' + resizeable;

window.open (URL, 'newPopup', popUpString);

}

Dette er pop-up generator. Den kombinerer variablene som er angitt tidligere, og bruker dem til å tilpasse "window.open" metode som lanserer pop-up.

7 Lagre HTML-dokumentet, og åpne den i alle nettlesere. Klikk på "Show Pop-up" -knappen. Den pop-up vises.

Hint

Du kan også bruke "ja" og "nei" i stedet for "1" og "0" når du angir verdier for de popup variabler.
Moderne nettlesere kan ikke skjule adresselinjen, selv om du velger å vise den.
Noen brukere installere pop-up blokkering. Dine pop-up vinduer vil ikke åpne hvis en brukers nettleser inneholder en pop-up blocker.