Opprette et modulært vindu med HTML5 & amp; CSS3

#close" title="Lukk" class=close>  X 
  Modalboks 
  Dette er en modellmodell boks som kan opprettes ved hjelp av CSS3-kreftene. 
  Du kan gjøre mange ting her, som å ha en popup-annonse som viser når nettstedet ditt laster, eller opprette et innloggings- / registreringsskjema for brukere. 

Starter styling

Akkurat nå har vi bare en link med en div som vises under den. Vi begynner å style boksen vår og gjøre den faktisk funksjonell. La oss først lage våre modalDialog- klasser og begynne å gå videre.

.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 ganske enkel. Vi styler dialogboksen ved å gi den en fast posisjon, noe som betyr at den beveger seg nedover siden, når den er åpen, hvis du ruller. Vi setter også topp-, høyre-, bunn- og venstrekantene til 0 slik at vår mørke bakgrunn spenner over hele skjermen.

Siden vi vil at bakgrunnen rundt modalboksen skal bli mørk når den er åpen, setter vi bakgrunnen til svart og endrer opaciteten litt. Vi sørger også for at vår modale boks sitter på toppen av alt ved å sette inn z-indeksegenskapen.

Til slutt legger vi en fin overgang for vår modale boks for å dukke opp på skjermen, og skjule boksen når den ikke klikkes på ved å sette skjermen til ingen.

Du kan ikke være helt kjent med egenskapen peker-hendelser, men det lar deg kontrollere når du gjør og ikke vil at elementer skal kunne klikkes. Vi stiller den til vår modalDialog- klasse fordi vi ikke vil at linken skal kunne klikkes inntil " pseudoklassen ": "mål" er avfyrt.

Funksjonalitet og utseende

La oss nå legge til vår : mål pseudoklasse samt stylingen til vår modale boks.

.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ål pseudoklasse, setter vi skjermen vår til å blokkere, slik at når linken klikkes, vises vår modale boks. Vi bruker også vår peker-hendelses eiendom slik at når koblingen er svevet over den er aktiv.

Vi stiler så vår div-kode ved å sette bredden, posisjonen, og bruke våre marginer til å støte modalboksen ned fra toppen, og sentrere den på vår side. Vi legger da til en liten stil ved å lage litt polstring, sette en fin grenseradio, og bruke en gradient av hvitt til mørkegrå for vår bakgrunn.

Lukker den opp

Nå som vi har stylet modalboksen og gjort den funksjonell, er det siste vi må gjøre å få vår lukkeknapp til å se bra ut. Ved å bruke CSS3 og HTML5 kan du lage knapper som ser ut som de er bilder, men egentlig ikke. Her er CSS vi bruker for 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 vår nære knapp setter vi bakgrunnsknappen og plasserer teksten ved hjelp av vår tekstjustering og linjehøyde. Da plasserer vi knappen ved hjelp av absolutt posisjon, og angir topp og høyre egenskaper. Hvordan lager vi det en sirkel og legger til litt dybde? Vi setter grensen radius til 12 og oppretter en liten dråpe skygge. Deretter for å legge til et lite brukerrespons, endrer vi bakgrunnen til en lyseblå når du svinger over den (andre ideer for svevering inkluderer å legge til en lineær overgang for å falme inn, endre skrifttekst eller utvide bokseskyggen litt).

Hvorfor vår modal boks er bedre

Som du sikkert har lagt merke til, er det store salgsargumentet med denne teknikken å skape en modal boks i HTML5 og CSS3. Hvorfor er det så sånn? Modale bokser i JavaScript er noe en nybegynner kan skape, det er hundrevis av eksempler og nedlastinger klare til å bli brukt. Så hvorfor ønsker vi å skrap JavaScript til fordel for HTML5 og CSS3?

Det ville være naivt av meg å si at et salgsargument er at folk med JavaScript kan bruke dem; statistikk viser at bare 2% av mennesker over hele verden bla uten JavaScript, så hvis det ikke er et problem, hva er det? Vel, vi tok fordel av CSS3-overganger når vi lagde vår modale boks. Den komplette koden var:

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

Vi brukte bare tre kodelinjer for å lage animasjonen vår. Hvis du sammenligner det med et hvilket som helst JavaScript animasjonsbibliotek, vil du bli sjokkert for å se hvor mye koden vår er minimert. Dette fører til en annen grunn, det vil si at vi har renere kode. Vi vet hva div som animasjonen er brukt på, og at den bare er 3 linjer lang. Dette gjør det enkelt for oss å endre det eller endre diven som vi ser hensiktsmessig, og ikke å bekymre deg for å endre en div i JavaScript, så vel som CSS og HTML.

Til slutt er HTML5 og CSS3 fremtiden. Alle jobber med å implementere dem i deres design og prosjekter, og ved hjelp av dem bidrar det til å vedvare vedtaket og sikrer at du ikke blir etterlatt. Du får renere kode, du trenger ikke å bekymre deg for JavaScript-biblioteker, og du har en hel masse webdesignere og utviklere som er klare til å hjelpe deg med eventuelle problemer du måtte ha fordi de er glade for å lære mer om språket også . HTML5 og CSS3 går ikke hvor som helst, så det er ingen grunn til ikke å bruke dem.

Når skal du bruke modale bokser

Så nå som vi har dekket hvordan du lager de modale boksene, og hvorfor du burde lage dem med HTML5 og CSS3, hva med når du skal bruke modale bokser?

Logg inn / registrer skjema

Jeg tror at de modale boksene er spesielt nyttige når de brukes til innlogging og registreringsskjemaer. Det skaper en slik strømlinjeformet opplevelse for brukeren, og kan virkelig gi et inntrykk av dine besøkende.

Vis bilder / videoer

En annen utmerket bruk av modal bokser er å vise bilder eller videoer (vanligvis kjent som lightboxes). Det gir brukeren mulighet til å se innholdet på nettstedet ditt uten å forlate nettsiden, og dermed holde dem ytterligere investert i webopplevelsen.

Bruker tilbakemelding

Når en bruker samhandler på nettsiden din og du vil kommunisere eller varsle om noe, hvilken bedre måte å gjøre det på enn en modal boks? Facebook har stor fordel med dette for når du vil endre språket ditt på deres nettside, eller for korte slør som "Hvorfor må jeg gi bursdagen min" -koblingen når du logger deg på. Hvis det ikke har nok tekst eller trenger å være en hel side, hvorfor ikke bruke en modalboks?

annonser

Et godt eksempel på reklame ved hjelp av modale bokser er musikkradionstjenesten Pandora. Hvis du ikke er medlem av deres premium service, vil du hver gang en gang få en annonse på skjermen. Noen ganger er det lydannonser som ser ut som om du bare lytter til en sang, og noen ganger er det en popup-boks for en video. Dette er en flott taktikk for folk som ønsker å injisere reklame i sine nettsider uten å alltid ha dem på siden.

Konklusjon

Der har du det, du kan nå lage en enkel HTML5 og CSS3 modal boks, og du kan bruke den til ting som brukerinnlogging / registreringsskjemaer, annonser og mye mer. Du har også lært hvorfor vi skal bruke HTML5 og CSS3 i stedet for JavaScript, og sett noen eksempler på hvordan nettsteder bruker modale bokser og hvordan du kan implementere dem i dine egne design.

Er du begeistret av mulighetene til HTML5 og CSS3? Vil JavaScript til slutt gå veien for Flash? Gi oss dine synspunkter i kommentarene nedenfor.

Miniatyrbilde via Shutterstock.