Pop-up-fönster för många olika ändamål har många användningsområden för webbkonstruktion. De kan användas för att skapa olika typer av menyer, placera reklamtexter och grafik, verktygstips när du fyller i komplexa formulär, och det är bekvämt att placera formulären själva i fönster som inte tar plats på sidan. I vår artikel hittar du en beskrivning av hur du kan skapa ett sådant fönster.
Det är nödvändigt
Grundläggande kunskaper om HTML
Instruktioner
Steg 1
popup, html, dolt lager
Steg 2
På många sidor på webben kan du se att snygga bibliotek med olika JavaScript-ramar (jQuery, MooTools, Prototype, etc.) används för att skapa popup-fönster på sidorna. I själva verket är de inte nödvändiga när man löser just detta problem. Verktygen i Hypertext Markup Language (HTML) och Cascading Style Sheets (CSS) är tillräckliga för att skapa popup-fönster. Fönstren som skapas på detta sätt fungerar oavsett om JavaScript är aktiverat i besökarens webbläsare.
All kod som skapar popup kan placeras på två rader. Den första raden skapar en länk som måste klickas för att visa popup:
Klicka här!
Här anger attributet onmouseover för länktaggen standard muspekartyp för länkar. Onclick-attributet anger att när den länkade klickas ska det dolda PopUp-blocket bli synligt.
Den andra raden är i själva verket popup-fönstret. Skikt med PopUp-identifieraren och storleken på fönstret, färg och storlek på text, bakgrund och kant som anges i stilattributet:
Detta är texten i popup-fönstret
Den är inte synlig som standard - detta indikeras av displayväljaren med värdet inget i skiktstilbeskrivningen.
Egentligen är detta allt du behöver för att skapa ett popup-fönster - placera dessa två rader mellan taggarna och din sida och den är redo att gå.
Steg 3
För att kunna stänga popup-fönstret framför taggen måste du lägga till en länk som utför motsatt åtgärd - dölja det synliga lagret med PopUp-identifieraren:
stänga
Steg 4
Och om du vill att fönstret ska dyka upp inte genom att klicka, utan genom att hålla muspekaren, måste den första raden med länken ändras på detta sätt:
flytta musen hit!
Steg 5
Du känner nu till principen och strukturen för popup-fönstrets kod, och utformningen av dess utseende och innehåll beror helt på dina mål och fantasi.
