Modal-ikkunan luominen HTML5 & amp; CSS3

#close" title="kiinni" class=close>  X 
  Modal Box 
  Tämä on esimerkkinä oleva modaalikenttä, joka voidaan luoda käyttämällä CSS3: n valtuuksia. 
  Voit tehdä paljon asioita täällä, kuten ponnahdusikkunassa, joka näyttää, milloin sivustosi latautuu tai luo kirjautumislomake käyttäjille. 

Aloita muotoilu

Tällä hetkellä meillä on vain linkki divaanin alla. Aloitetaan muotoilemalla laatikkoamme ja tekemällä se todella toiminnalliseksi. Luomme ensin modalDialog- luokat ja aloitamme eteenpäin.

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

Koodi on melko yksinkertainen. Kehitämme valintaikkunamme antamalla sille kiinteän sijainnin, eli se siirtyy alas sivulle, kun se on auki, jos vierität. Myös ylä-, oikea-, ala- ja vasemman reunat asetetaan arvoon 0 niin, että tumma tausta ulottuu koko näytön yli.

Koska haluamme, että modaalikotelon ympärillä oleva tausta on pimeä, kun se on auki, asetamme taustan mustaksi ja muutetaan peittävyyttä hieman. Varmistamme myös, että modaalikotelo istuu kaiken päälle asettamalla z-hakemistomme.

Lopuksi asetamme mukavan siirtymän modaalilaatikkoon, joka näkyy näytöllä ja piilottaa laatikon, kun sitä ei napsauteta asettamalla näyttö näyttöön.

Et ehkä täysin tunne osoitin-tapahtumien ominaisuuksia, mutta sen avulla voit hallita, milloin et, ja et halua elementtien napsautettavuutta. Asettamme sen modalDialog- luokallemme, koska emme halua, että linkkiä voidaan napsauttaa, kunnes ": kohde" pseudo-luokka käynnistetään.

Toimivuus ja ulkonäkö

Lisää nyt nyt : kohde- pseudokurssimme sekä modaalilaatikon muotoilu.

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

Tavoitellun pseudo-luokan kanssa asetamme näytön estämään, joten kun linkki napsautetaan, modaalilaatikko näkyy. Käytämme myös osoitin-tapahtumien ominaisuutta niin, että kun linkki leijuu sen päälle, se on aktiivinen.

Sitten suunnittelemme div-tunnistimme asettamalla leveyden, sijainnin ja käyttämällä marginaalejamme, jotta modaalikotelo pääsee alaspäin yläosasta ja keskittämällä sen sivullemme. Sitten lisäämme hieman tyyliä luomalla jonkin verran pehmusteita, asettamalla mukava raja-alue ja käyttämällä taustalla valkoisen tai tumman harmaan kaltevuutta.

Sulje se

Nyt, kun olemme muotoilemassa modaalilaatikkoa ja tehneet sen toiminnalliseksi, viimeinen asia, jonka meidän on tehtävä, on saada lähelläpainamme näyttää hyvältä. CSS3: n ja HTML5: n avulla voidaan luoda painikkeita, jotka näyttävät olevan kuvia, mutta eivät todellakaan ole. Tässä on CSS, jota käytämme tälle:

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

Meidän sulkemispainikkeemme asettamme taustapainikkeen ja sijoitamme tekstin tekstin kohdistamiseen ja linjan korkeuteen. Sitten sijoitamme painikkeen absoluuttisen sijainnin avulla ja asetamme ylä- ja oikeanlaiset ominaisuudet. Miten voimme tehdä sen ympyrän ja lisätä syvyyttä? Asettelimme reunan säde 12: een ja luodaan pieni pudotusvarjon. Sitten lisäämme hieman käyttäjän vastausta muuttamalla tausta vaaleansiniseksi, kun siirrät sen päälle (muut ideoita liikkumiseen sisältävät esimerkiksi lineaarisen siirtymän lisäämisen haalistumiseen, fonttitekstin muuttamisen tai laatikon varjon lisäämisen hieman).

Miksi modaalilaatikko on parempi

Kuten olet todennäköisesti huomannut, tämän tekniikan suuri myyntipiste muodostaa moduuliruutun HTML5: ssä ja CSS3: ssa. Miksi tällainen iso juttu on? Modaalilaatikoita JavaScriptissa jotain, jonka aloittelija voisi luoda, on satoja esimerkkejä ja latauksia valmiina käytettäväksi. Joten miksi haluamme rikkoa JavaScriptin HTML5: n ja CSS3: n hyväksi?

Minusta olisi naivea sanoa, että yksi myyntipiste on varmistaa, että JavaScriptin käyttäjät voivat käyttää niitä; tilastot osoittavat, että vain 2% ihmisistä selaa JavaScript ilman JavaScriptia, joten jos tämä ei ole ongelma, mikä on? Hyvin käytimme CSS3-siirtymisiä luomalla modaalilaatikkoamme. Täydellinen koodi oli:

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

Käytimme vain kolmea riviä koodia animaation luomiseen. Jos verrataan sitä JavaScript-animaatiokirjastoon, sinun on järkyttynyt nähdäkseen, kuinka paljon koodimme on minimoitu. Tämä johtuu toisesta syystä, eli meillä on puhtaampi koodi. Tiedämme, mitä div, että animaatiota sovelletaan, ja että se on vain 3 riviä pitkä. Tämä helpottaa meitä muokkaamaan sitä tai muuttamaan div mitä mielestämme sopii, eikä sinun tarvitse huolehtia siitä, että JavaScriptin ja CSS: n ja HTML: n muuttaminen tapahtuu.

Lopuksi HTML5 ja CSS3 ovat tulevaisuutta. Kaikki työskentelevät toteuttamaan ne malleihinsa ja projekteihinsä, ja niiden käyttäminen auttaa jatkamaan sen hyväksymistä ja varmistaa, että et jää jäljelle. Saat puhtaampaa koodia, sinun ei tarvitse huolehtia JavaScript-kirjastoista, ja sinulla on koko joukko web-suunnittelijoita ja kehittäjiä, jotka ovat valmiita auttamaan sinua mahdollisesti kohtaavissa asioissa, koska he ovat innoissaan oppimaan lisää myös kieltä . HTML5 ja CSS3 eivät mene mihinkään, joten ei ole mitään syytä olla käyttämättä niitä.

Milloin modaalilaatikoita käytetään

Joten nyt, kun olemme käsitelleet modaalilaatikoiden tekemisen ja miksi sinun pitäisi tehdä ne HTML5: llä ja CSS3: lla, miten käyttää modaalilaatikoita?

Kirjaudu / rekisteröidä lomake

Uskon, että modaalilaatikot ovat erityisen hyödyllisiä, kun niitä käytetään kirjautumis- ja rekisteröintilomakkeissa. Se luo tällaisen virtaviivaisen kokemuksen käyttäjälle ja voi todella vaikuttaa kävijöisiisi.

Näytä kuvat / videot

Toinen erinomainen tapa käyttää modaalilaatikoita on näyttää kuvia tai videoita (tunnetaan yleisesti nimellä lightboxes). Sen avulla käyttäjä voi tarkastella verkkosivuston sisältöä poistumatta verkkosivulta, jolloin he voivat sijoittaa edelleen verkkokokemukseensa.

Käyttäjäpalaute

Kun käyttäjä on vuorovaikutuksessa verkkosivustossasi ja haluat ilmoittaa tai ilmoittaa heistä jotain, mikä parempi tapa tehdä se kuin modaalilaatikko? Facebook hyödyntää suuresti tätä, kun haluat vaihtaa kieltä verkkosivustollasi tai lyhyitä sumeita, kuten "Miksi minun pitää antaa syntymäpäiväni" -linkkiä, kun olet kirjautumassa sisään. Jos sillä ei ole tarpeeksi tekstiä tai tarvitsee olla koko sivu, miksi ei käytä modaalilaatikkoa?

Mainokset

Erinomainen esimerkki mainosmuodoista on musiikkipalvelu Pandora. Jos et ole jäsenenä heidän premium-palvelussaan, näyttöön tulee mainos joka kerta. Joskus nämä ovat äänimainoksia, jotka näyttävät kuuntelevan kappaleita, ja joskus on videon ponnahdusikkuna. Tämä on loistava taktiikka niille ihmisille, jotka haluavat pistää mainontaa verkkosivuihinsa ilman että heillä on aina sivuja.

johtopäätös

Sinulla on se, voit luoda yksinkertaisen HTML5- ja CSS3-modaalilaatikon, ja voit käyttää sitä sellaisiin asioihin kuin käyttäjätunnukset / rekisteröintilomakkeet, mainokset ja paljon muuta. Olet myös oppinut, miksi meidän pitäisi käyttää HTML5 ja CSS3 JavaScriptin sijaan, ja näimme joitain esimerkkejä siitä, miten sivustot käyttävät modaalilaatikoita ja miten ne voidaan toteuttaa omiin malleihisi.

Oletko innostunut HTML5 & CSS3: n mahdollisuuksista? Voiko JavaScript lopulta mennä Flashin tapaan? Anna meille mielipiteesi alla olevissa huomautuksissa.

Pikkukuva kautta Shutterstock.