Oprettelse af et modalt vindue med HTML5 & amp; CSS3

#close" title="Tæt" class=close>  x 
  Modal Box 
  Dette er en prøvemodal boks, der kan oprettes ved hjælp af CSS3's beføjelser. 
  Du kan gøre en masse ting her, som om du har en popupannonce, der viser, hvornår dit websted indlæser eller opretter en login / registreringsformular til brugere. 

Starter styling

Lige nu har vi bare et link med en div, der vises under den. Vi vil begynde at styling vores kasse og gøre det faktisk funktionelt. Lad os først oprette vores modalDialog- klasser og begynde at bevæge os fremad.

.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 her er ret simpel. Vi styler vores dialogboks ved at give den en fast position, hvilket betyder at den vil flytte ned på siden, når den er åben, hvis du ruller. Vi sætter også vores øverste, højre, nederste og venstre kant til 0, så vores mørke baggrund spænder over hele skærmen.

Da vi vil have baggrunden omkring modalboksen for at blive mørk, når den er åben, sætter vi baggrunden til sort og ændrer opacitet lidt. Vi sørger også for, at vores modalbox sidder oven på alt ved at indstille vores z-indeksegenskab.

Endelig sætter vi en god overgang til vores modalbox for at dukke op på skærmen og gemme boksen, når den ikke klikkes på ved at indstille displayet til ingen.

Du kan ikke være helt bekendt med det, som pegerhændelsesegenskaben, men det giver dig mulighed for at styre, når du gør det og ikke vil have elementer, der kan klikkes. Vi indstiller det til vores modalDialog klasse, fordi vi ikke ønsker, at linket skal kunne klikkes, indtil "target" pseudoklassen er fyret.

Funktionalitet og udseende

Lad os nu tilføje vores : mål pseudoklasse samt styling til vores 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 vores mål pseudoklasse sætter vi vores display for at blokere, så når linket klikkes, vises vores modalbox. Vi bruger også vores pointer-events ejendom, så når linket er svævet over det er aktivt.

Vi stiler så vores div-tag ved at indstille bredden, positionen og bruge vores margener til at støde modalboxen ned fra toppen og centrere den på vores side. Vi tilføjer derefter en lille stil ved at skabe noget polstring, indstille en fin kantradius og bruge en gradient af hvid til mørkegrå til vores baggrund.

Lukning af det

Nu hvor vi har stylet modalboxen og gjort den funktionel, er det sidste, vi skal gøre, at få vores tætte knap til at se godt ud. Brug af CSS3 og HTML5 kan skabe knapper, der ser ud som om de er billeder, men det er det egentlig ikke. Her er CSS'en, vi bruger til dette:

.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; }

For vores tætte knap sætter vi baggrundsknappen og placerer teksten ved hjælp af vores tekstjustering og linjens højde. Så placerer vi knappen ved hjælp af absolut position, og sætter vores øverste og højre egenskaber. Hvordan gør vi det til en cirkel og tilføjer en dybde? Vi sætter grænsen radius til 12 og skabe en lille drop skygge. Derefter for at tilføje et lille brugerrespons ændrer vi baggrunden til en lyseblå, når du svæver over den (andre ideer til at svæve er at tilføje en lineær overgang for at falme i, skifte skrifttype eller udvide bokseskyggen lidt).

Hvorfor vores modal kasse er bedre

Som du sikkert har bemærket, er det store salgsargument med denne teknik at skabe en modal boks i HTML5 og CSS3. Hvorfor er det så meget, selvom? Modalbokse i JavaScript er noget, en nybegynder kunne skabe, der er hundredvis af eksempler og downloads klar til at blive brugt. Så hvorfor vil vi scrap JavaScript til fordel for HTML5 og CSS3?

Det ville være naivt for mig at sige, at et salgsargument er at sikre, at folk med JavaScript kan bruge dem; statistikker viser, at kun 2% af verdens befolkning browse uden JavaScript, så hvis det ikke er et problem, hvad er det? Nå vi tog fordel af CSS3 overgange, når vi lavede vores modal box. Den komplette kode var:

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

Vi brugte kun tre linjer kode til at skabe vores animation. Hvis du sammenligner det med et hvilket som helst JavaScript animationsbibliotek, vil du blive chokeret over at se, hvor meget vores kode er minimeret. Dette fører til en anden grund, det vil sige, vi har renere kode. Vi ved, hvad div, som animationen anvendes på, og at den kun er 3 linjer lang. Dette gør det nemt for os at ændre det eller ændre div som vi finder passende, og ikke behøver at bekymre os om at ændre en div i JavaScript såvel som CSS og HTML.

Endelig er HTML5 og CSS3 fremtiden. Alle arbejder på at implementere dem i deres design og projekter, og ved hjælp af dem hjælper det med at vedtage dets vedtagelse og sikrer, at du ikke bliver efterladt. Du får renere kode, du behøver ikke bekymre dig om JavaScript-biblioteker, og du har en hel masse webdesignere og -udviklere, der er klar til at hjælpe med eventuelle problemer, du måtte have, fordi de er glade for at lære mere om sproget også . HTML5 og CSS3 går ikke overalt, så der er ingen grund til ikke at bruge dem.

Hvornår skal man bruge modale kasser

Så nu hvor vi har dækket, hvordan man laver de modale bokse, og hvorfor skal du lave dem med HTML5 og CSS3, hvad med når du skal bruge modale kasser?

Login / registreringsformular

Jeg tror, ​​at modalbokse er særligt nyttige, når de bruges til login og registreringsformularer. Det skaber en så strømlinet oplevelse for brugeren, og kan virkelig give et indtryk på dine besøgende.

Vis billeder / videoer

En anden fremragende brug af modalbokse er at vise billeder eller videoer (almindeligvis kendt som lightboxes). Det giver brugeren mulighed for at se indholdet på dit websted uden at forlade websiden og dermed holde dem yderligere investeret i din weboplevelse.

Brugerfeedback

Når en bruger interagerer på din webside, og du vil kommunikere eller advare dem om noget, hvilken bedre måde at gøre det end en modal box? Facebook har stor fordel herfor, når du vil ændre dit sprog på deres hjemmeside eller for korte blurbs som linket "Hvorfor skal jeg forsyne min fødselsdag", når du tilmelder dig. Hvis det ikke har nok tekst eller skal være en hel side, hvorfor ikke bruge en modal box?

Annoncer

Et godt eksempel på reklame ved hjælp af modale kasser er musikradio-tjenesten Pandora. Hvis du ikke er medlem af deres premium service, får du en gang imellem en annonce på skærmen. Nogle gange er det lydannoncer, der ligner at du bare lytter til en sang, og nogle gange er det en popup-boks til en video. Dette er en fantastisk taktik for folk, der ønsker at injicere reklame på deres websider uden altid at have dem på siden.

Konklusion

Der har du det, du kan nu oprette en simpel HTML5 og CSS3 modal boks, og du kan bruge den til ting som bruger login / registreringsformularer, annoncer og meget mere. Du har også lært, hvorfor vi skal bruge HTML5 og CSS3 i stedet for JavaScript og se nogle eksempler på hvordan websteder bruger modale kasser og hvordan du kan implementere dem i dine egne designs.

Er du begejstret for muligheden for HTML5 og CSS3? Vil JavaScript i sidste ende gå i vejen for Flash? Giv os dine synspunkter i kommentarerne nedenfor.

Miniaturebillede via Shutterstock.