HTML Pop-Up Size

HTML Pop-Up Size

Ofte, når du opretter en hjemmeside, kan du præsentere brugeren med vigtige oplysninger i en anden pop-up-vinduet; men det er vigtigt at forstå, hvordan man korrekt konfigurere dens HTML pop-up størrelse.

Indstilling af en Window HTML Pop-Up Size

Der er et par forskellige metoder, du kan bruge til at generere en pop-up-vinduet til din hjemmeside. Hver metode har sine fordele og ulemper, så overvej disse omhyggeligt, før du vælger en. Hvordan du størrelse vinduet i hvert enkelt tilfælde er generelt den samme, men placeringen i din HTML-kode, hvor det er defineret, vil være anderledes. De to metoder til at åbne et nyt vindue enten bruger Javascript, eller ikke bruger Javascript.

Ved hjælp af Javascript Med en formular

Den mest almindelige teknik, webmasters bruge til at generere en pop-up-vindue er gennem Javascript. Javascript er en fleksibel scripting sprog, der gør det muligt at behandle brugerinteraktioner gennem script der kører direkte på brugerens browser i stedet for på webserveren. Dette giver mulighed for meget hurtige og dynamiske skærmen skifter og formatering baseret på brugernes valg.

Du generere en pop-up vindue i Javascript metoden window.open. Hvad sætter Javascript teknikken fra hinanden er, at den åbne () metode kører i Javascript-kode, er defineret i din HTML-kode inden for de "script" tags.

I en form, programmere du en knap til at åbne et nyt vindue som følger.

<Script type = "text / javascript">

<! -

funktion myWindow () {

window.open ("http://www.google.com/", "myWindow", "status = 1, height = 200, width = 200, resizable = 0")

}

// ->

</ Script>

</ Head>

<Body>

<Form> <input type = "knappen" onClick = "myWindow ()" value = "Nyt vindue"> </ form>

Når brugeren klikker på knappen form er funktionen "myWindow" i Javascript køre, som bruger "windows.open" metode til at lancere et nyt vindue.

Window.open metoden anvendes i enhver teknik til at åbne en pop-up. Så de egenskaber, der bruges med denne metode er, hvad bestemme, hvad pop-up vindue vil se ud, herunder det størrelse.

Window.Open egenskaber omfatter:

  • Fullscreen - Vælger, om det nye vindue vil være display fullscreen eller ej
  • Højde - Bestemmer højden af pop-up i pixels
  • Bredde - Bestemmer bredden af pop-up i pixels
  • Venstre - Afstand fra venstre side af skærmen i pixels
  • Top - Afstand fra toppen af skærmen i pixels
  • Status - Hvorvidt at vise en øverste statuslinje
  • Resizable - Hvorvidt at tillade brugeren at ændre størrelsen på nyt vindue
  • Dependent - Dette vil gøre pop-up close hvis det vindue, der lancerede den lukker

Brug Javascript med et hyperlink

HTML Pop-Up Size
Hvordan aktiverer jeg Javascript

En anden pop-up-teknik under anvendelse af javascript er, når du bruger et hyperlink, snarere end en formular, og du vil hyperlinket til at lancere et pop-up vindue. Dette opnås på samme måde som formen eksemplet ovenfor, undtagen i stedet for en form knap lanceringen af ​​"myWindow" Javascript-funktion, hyperlinket gør.

<Script type = "text / javascript">

<! -

funktion myWindow (adresse) {

window.open (adresse, "myWindow", "status = 1, height = 200, width = 200, resizable = 0")

}

// ->

</ Script>

</ Head>

<Body>

<a HREF="javascript:myWindow('http://www.google.com')"> klik for at åbne </a>

Igen bliver størrelsen parametre konfigureret samme. Ved hjælp af denne metode kan du bruge den samme "myWindow" funktioner med hver hyperlink, du vil oprette et pop-up vindue med. Alt du skal gøre er at give det URL'en.

Ved hjælp af en "rigtig" Hyperlink

Det største problem med at bruge Javascript til at håndtere pop-up-vinduer er, at mange mennesker ønsker at højreklikke på et hyperlink og åbne linket i et nyt vindue. Hvis du bruger metoden ovenfor, hvor hyperlinket er faktisk en Javascript funktion opkald, hvis brugeren forsøger at åbne linket ved at højreklikke på det, vil de ende med en tom side.

På grund af dette problem, den bedste tilgang til at åbne et pop-up vindue med et link er at udnytte vinduet-åbne som en del af "href" tag, men at opretholde hjemmesiden adresse i tag så godt. Denne teknik er vist nedenfor.

<a href="http://www.google.dk" onclick="window.open(this.href,'popupwindow', width=200,height=200,scrollbars,resizable'); tilbage false;"> < / a>

Ved at bruge over koden, vil din side være meget mere ren og effektiv. Den hyperlink fortsat en "rigtig" hyperlink, men det bruger også "window.open" for at oprette pop-up-vindue, med størrelsen definerede parametre inden for samme "href" tag.

Pop-up vindue Størrelse Overvejelser

Vigtige faktorer at tage hensyn til, når du indstiller længde og bredde parametre for en pop-up-vindue omfatter placeringen af ​​vinduet, og formateringen af ​​indholdet. Placering af din pop-up vindue er defineret ved "top" og "venstre" egenskaber. Hvis vinduet er placeret langt nok mod til toppen og til venstre på skærmen, så vil du have mere plads til at åbne en større vindue. Hvis det er tættere på bunden eller højre, så skal du størrelse vinduet i overensstemmelse hermed. For det andet, når fastsættelsen af ​​HTML pop-up størrelse af et vindue, nøje overveje, hvordan indholdet vil se ud i en meget mindre vindue. Når du skriver den side, der vises i pop-up, altid formatere den til størrelse parametre, som du planlægger at indstille. Dette vil sikre, at pop-up vindue vil se professionel, ren og korrekt størrelse.

Flere oplysninger

Yderligere oplysninger om web kodning, så tjek nedenstående LoveToKnow artikler.

  • Avancerede HTML Koder
  • Bootstrap PHP Code
  • Hvordan laver et billede rollover
  • Cool HTML Effects