Pop-up-vinduer til en lang række formål har mange anvendelser i webkonstruktion. De kan bruges til at oprette forskellige menuer, placere reklametekster og grafik, værktøjstip ved udfyldning af komplekse formularer, og det er praktisk at placere formularerne selv i vinduer, der ikke optager plads på siden. I vores artikel finder du en beskrivelse af, hvordan du kan skabe et sådant vindue.
Er det nødvendigt
Grundlæggende viden om HTML
Instruktioner
Trin 1
popup, html, skjult lag
Trin 2
På mange sider på internettet kan du se, at smarte biblioteker med forskellige JavaScript-rammer (jQuery, MooTools, Prototype osv.) Bruges til at oprette pop op-vinduer på siderne. Imidlertid er de faktisk ikke nødvendige, når man løser dette særlige problem. De tilgængelige værktøjer i Hypertext Markup Language (HTML) og Cascading Style Sheets (CSS) er tilstrækkelige til at oprette pop op-vinduer. Windows oprettet på denne måde fungerer uanset om JavaScript er aktiveret i den besøgendes browser.
Al den kode, der opretter pop op, kan placeres på to linjer. Den første linje opretter et link, der skal klikkes for at få vist popup:
Klik her!
Her indstiller attributten onmouseover for linktagget standard musemarkørtype for links. Onclick-attributten specificerer, at når der klikkes på linket, skal den skjulte PopUp-blok blive synlig.
Den anden linje er faktisk pop op-vinduet. Lag med PopUp-identifikatoren og størrelsen på vinduet, farve og størrelse på teksten, baggrunden og rammen angivet i stilattributten:
Dette er teksten i pop op
Det er ikke synligt som standard - dette er angivet af skærmvælgeren med en værdi på ingen i beskrivelsen af lagstil.
Faktisk er dette alt hvad du behøver for at oprette et pop op-vindue - placer disse to linjer mellem tags og din side, og den er klar til at gå.
Trin 3
For at kunne lukke pop op-vinduet foran tagget skal du tilføje et link, der udfører den modsatte handling - skjule det synlige lag med PopUp-identifikatoren:
tæt
Trin 4
Og hvis du vil have vinduet til at dukke op ikke ved at klikke, men ved at holde musemarkøren, så skal den første linje med linket ændres på denne måde:
flyt musen herover!
Trin 5
Du er nu bekendt med princippet og strukturen i pop op-vindueskoden, og designet af dets udseende og indhold afhænger helt af dine mål og fantasi.
