Skapa ett modalt fönster med HTML5 & Amp; CSS3

#close" title="Stänga" class=close>  X 
  Modal Box 
  Detta är en modellmodelllåda som kan skapas med hjälp av CSS3-krafterna. 
  Du kan göra en hel del saker här som att ha en popup-annons som visar när din webbplats laddar, eller skapa ett inloggnings- / registreringsformulär för användare. 

Starta styling

Just nu har vi bara en länk med en div som visas under den. Vi kommer att börja styling vår låda och göra det faktiskt funktionellt. Låt oss först skapa våra modalDialog- klasser och börja gå vidare.

.modalDialog {position: fixed;font-family: Arial, Helvetica, sans-serif;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0,0,0,0.8);z-index: 99999;opacity:0;-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;pointer-events: none;}

Koden här är ganska enkel. Vi utformar vår dialogruta genom att ge den en fast position, vilket betyder att den kommer att flytta ner på sidan, när den är öppen, om du bläddrar. Vi ställer också våra topp-, höger-, botten- och vänstra kanter till 0 så att vår mörka bakgrund spänner över hela skärmen.

Eftersom vi vill att bakgrunden runt modalboxen ska bli mörk när den är öppen ställer vi bakgrunden till svart och ändrar opaciteten något. Vi ser också till att vår modalbox sitter på toppen av allt genom att ställa in vår z-index egenskap.

Slutligen sätter vi en fin övergång för vår modalbox för att dyka upp på skärmen och gömma rutan när den inte klickas på genom att ställa in skärmen till ingen.

Du kanske inte är helt bekant med egenskapen pekarehändelser, men det låter dig styra när du gör och inte vill att element kan klickas. Vi ställer in den för vår modalDialog- klass eftersom vi inte vill att länken ska kunna klickas tills pseudoklassen ": target" är avfyrade.

Funktionalitet och utseende

Låt oss nu lägga till vår : mål pseudoklass samt stilen för vår modalbox.

.modalDialog:target {opacity:1;pointer-events: auto;}.modalDialog > div {width: 400px;position: relative;margin: 10% auto;padding: 5px 20px 13px 20px;border-radius: 10px;background: #fff;background: -moz-linear-gradient(#fff, #999);background: -webkit-linear-gradient(#fff, #999);background: -o-linear-gradient(#fff, #999);}

Med vår målpseudoklass ställer vi vår skärm att blockera, så att när länken är klickad kommer vår modalkassa att visas. Vi använder också vår pekarehändelser egendom så att när länken är svävad över den är aktiv.

Vi utformar sedan vår div-märkning genom att ställa in bredden, positionen och använda våra marginaler för att stöta modalboxen nedifrån toppen och centrera den på vår sida. Vi lägger sedan till en liten stil genom att skapa lite vadderingar, ställa in en fin gränsradie och använda en gradient av vit till mörkgrå för vår bakgrund.

Stänger upp det

Nu när vi har stylat modalboxen och gjort den funktionell, är det sista vi behöver göra att få vår nära knapp att se bra ut. Använda CSS3 och HTML5 kan skapa knappar som ser ut som de är bilder, men det är verkligen inte. Här är CSS som vi använder för detta:

.close {background: #606061;color: #FFFFFF;line-height: 25px;position: absolute;right: -12px;text-align: center;top: -10px;width: 24px;text-decoration: none;font-weight: bold;-webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 1px 1px 3px #000;-webkit-box-shadow: 1px 1px 3px #000;box-shadow: 1px 1px 3px #000;}.close:hover { background: #00d9ff; }

För vår nära knapp ställer vi bakgrundsknappen och placerar texten med hjälp av vår textjustering och linjehöjd. Då placerar vi knappen med absolut position och ställer in våra högsta och högsta egenskaper. Hur gör vi det till en cirkel och lägger till lite djup? Vi ställer gränsvärdet till 12 och skapar en liten droppskugga. Sedan lägger vi till ett litet användarrespons, vi ändrar bakgrunden till en ljusblå när du svävar över den (andra idéer för svängning inkluderar att lägga till en linjär övergång för att blekna in, ändra textstorlek eller expandera rutaskuggan något).

Varför vår modalbox är bättre

Som du säkert har lagt märke till är det stora försäljningsstället med denna teknik att skapa en modalbox i HTML5 och CSS3. Varför är det så så mycket? Modalboxar i JavaScript är något som en nybörjare kan skapa, det finns hundratals exempel och nedladdningar redo att användas. Så varför vill vi skrapa JavaScript till förmån för HTML5 och CSS3?

Det skulle vara naivt av mig att säga att en säljpunkt gör att folk med JavaScript kan använda dem. statistik visar att endast 2% av människor världen över bläddrar utan JavaScript, så om det inte är något problem, vad är det? Tja, vi utnyttjade CSS3-övergångar när vi skapade vår modalbox. Den fullständiga koden var:

-webkit-transition: opacity 400ms ease-in;-moz-transition: opacity 400ms ease-in;transition: opacity 400ms ease-in;

Vi använde bara tre rader av kod för att skapa vår animation. Om du jämför det med något JavaScript-animationsbibliotek kommer du bli chockad över att se hur mycket vår kod minimeras. Detta leder till en annan anledning, det vill säga, vi har renare kod. Vi vet vilken div som animationen tillämpas på, och att den bara är 3 linjer lång. Det gör det enkelt för oss att ändra det eller ändra div som vi passar, och behöver inte oroa oss för att ändra en div i JavaScript samt CSS och HTML.

Slutligen är HTML5 och CSS3 framtiden. Alla arbetar för att genomföra dem i sina mönster och projekt, och med hjälp av dem hjälper det att vidmakthålla antagandet och säkerställer att du inte blir kvar. Du får renare kod, du behöver inte oroa dig för JavaScript-bibliotek och du har en hel del webbdesigners och utvecklare som är redo att hjälpa till med eventuella problem du kan ha eftersom de är glada att lära sig mer om språket också . HTML5 och CSS3 går inte någonstans, så det finns ingen anledning att inte använda dem.

När ska man använda modala lådor

Så nu när vi har täckt hur man gör de modala rutorna och varför ska du göra dem med HTML5 och CSS3, vad sägs om när du ska använda modala lådor?

Logga in / registrera formulär

Jag tror att modalkassorna är särskilt användbara när de används för inloggnings- och registreringsformulär. Det skapar en så strömlinjeformad upplevelse för användaren, och kan verkligen ge ett intryck på dina besökare.

Visa bilder / videoklipp

En annan utmärkt användning av modala lådor är att visa bilder eller videoklipp (vanligen kända som lådor). Det gör det möjligt för användaren att se innehållet på din webbplats utan att lämna webbsidan och därigenom hålla dem mer investerade i din webbupplevelse.

Användarens återkoppling

När en användare interagerar på din webbsida och du vill kommunicera eller varna dem om något, vilken bättre sätt att göra det än en modalbox? Facebook har stor nytta av detta för när du vill byta språk på deras hemsida eller för korta suddigheter som "Varför behöver jag ge min födelsedag" länk när du loggar in. Om det inte har tillräckligt med text eller behöver vara en hel sida, varför inte använda en modalbox?

annonser

Ett bra exempel på reklam med hjälp av modala lådor är musikradionstjänsten Pandora. Om du inte är medlem i deras premium service, kommer du en gång i taget att få en annons på din skärm. Ibland är det ljudannonser som ser ut som om du bara lyssnar på en sång och ibland är det en popup-låda för en video. Det här är en bra taktik för personer som vill injicera reklam i sina webbsidor utan att alltid ha dem på sidan.

Slutsats

Där har du det, du kan nu skapa en enkel HTML5 och CSS3 modalbox, och du kan använda den för saker som användar inloggning / registreringsformulär, annonser och mycket mer. Du har också lärt oss varför vi ska använda HTML5 och CSS3 istället för JavaScript och se några exempel på hur webbplatser använder modala rutor och hur du kan implementera dem i dina egna mönster.

Är du upphetsad av möjligheterna till HTML5 och CSS3? Kommer JavaScript så småningom att bli vägen för Flash? Låna oss dina synpunkter i kommentarerna nedan.

Tumnagel bild via Shutterstock.