Hvordan lage en pop-up vindu uten Javascript

Popup-vinduer er en nyttig, men noen ganger frustrerende del av Internett. Når den brukes til å formidle informasjon, de er et verdifullt verktøy. Når den brukes til å selge deg feriepakker, de er irriterende. Når du arbeider som en Web-designer, må du også se på hvordan du oppretter en pop-up. Vanligvis bruker du Javascript for å kode pop-up, men noen nettlesere blokkerer Javascript, og det fungerer ikke alltid riktig. Du kan lage pop-up tekst i Cascading Style Sheets (CSS) skal vises på siden når du musen over en blokk med hypertekst.

Bruksanvisning

1 Åpne websiden i en HTML-redigeringsverktøy, for eksempel Notisblokk.

2 Plasser markøren i hyperkoblingen du vil at pop-up i.

3 Type "<span>" i begynnelsen av teksten i hyperkoblingen.

4 Skriv inn </ span> på slutten av teksten i hyperkoblingen.

5 Lagre filen og lukk den.

6 Åpne din CSS-filen i en teksteditor.

7 Sett inn følgende tekst:

"Div # knytter en span {display: none;}"

Dette holder skjult pop-up tekst vises når du åpner siden.

8 Sett inn følgende tekst:

"Div # linker a: hover span {display: block;

position: absolute; top: 200px; venstre: 0; width: 125px;

padding: Xpx; margin: Ypx; z-index: Z;

color: # (fargekode); bakgrunn: black;

font: 10px (skrift), (stil); text-align: (justering);} "

De siste tre linjene representerer hvordan teksten vises. Erstatt "X", "Y" og "Z" med passende verdier. Erstatt "(fargekode)", "(skrift)", "(stil)" og "(justering)" med verdier som er egnet for din webside.

9 Lagre og lukk CSS-filen.

Hint

  • Denne metoden er effektiv bare for tekst pop-ups. Ikke bruk ikoner eller annen grafikk.