Pop-up-vinduer for en rekke formål har mange bruksområder i nettkonstruksjon. De kan brukes til å lage forskjellige typer menyer, plassere reklametekster og grafikk, verktøytips når du fyller ut komplekse skjemaer, og det er praktisk å plassere skjemaene selv i vinduer som ikke tar plass på siden. I vår artikkel finner du en beskrivelse av hvordan du kan lage et slikt vindu.
Det er nødvendig
Grunnleggende kunnskap om HTML
Bruksanvisning
Trinn 1
popup, html, skjult lag
Steg 2
På mange sider på nettet kan du se at fancy biblioteker med forskjellige JavaScript-rammer (jQuery, MooTools, Prototype, etc.) brukes til å lage popup-vinduer på sidene. Imidlertid er de faktisk ikke nødvendige når du løser dette spesielle problemet. Verktøyene som er tilgjengelige i Hypertext Markup Language (HTML) og Cascading Style Sheets (CSS) er tilstrekkelig til å lage popup-vinduer. Vinduene opprettet på denne måten vil fungere uavhengig av om JavaScript er aktivert i den besøkendes nettleser.
All koden som lager popup kan plasseres på to linjer. Den første linjen oppretter en lenke som må klikkes for å vise popup-vinduet:
Klikk her!
Her setter attributtet onmouseover til koblingstaggen standard musemarkørtype for lenker. Onclick-attributtet spesifiserer at når du klikker på lenken, skal den skjulte PopUp-blokken bli synlig.
Den andre linjen er faktisk popup-vinduet. Lag med PopUp-identifikatoren og størrelsen på vinduet, farge og størrelse på teksten, bakgrunnen og rammen som er spesifisert i stilattributtet:
Dette er teksten i popup-vinduet
Det er ikke synlig som standard - dette er indikert av skjermvelgeren med verdien ingen i beskrivelsen av lagstilen.
Egentlig er dette alt du trenger for å lage et popup-vindu - plasser disse to linjene mellom kodene og siden din, og den er klar til bruk.
Trinn 3
For å kunne lukke popup-vinduet foran taggen, må du legge til en lenke som utfører motsatt handling - skjule det synlige laget med PopUp-identifikatoren:
Lukk
Trinn 4
Og hvis du vil at vinduet skal dukke opp ikke ved å klikke, men ved å holde musepekeren, må den første linjen med lenken endres på denne måten:
flytt musen hit!
Trinn 5
Du er nå kjent med prinsippet og strukturen til popup-vinduskoden, og utformingen av utseendet og innholdet avhenger helt av dine mål og fantasi.
