Recently, I made the lock from creating fullstack Ruby apps to working with Javascript. Kuten saatat jo tietää, Javascript antaa käyttäjille, tai asiakkaille, vuorovaikutuksessa verkkosivun ja dynaamisesti tehdä uutta sisältöä DOM perustuu käyttäjän interaktiivisuutta. Verrattuna koodaus Ruby On Rails (jossa jokainen rerender vaatii koko sivun Päivitä), kyky rerender eri sivun elementtejä perustuu käyttäjän vuorovaikutukseen Javascript toi minun frontend kehitys taitoja pois 1994 ja nykypäivään. Minun alkeellinen ymmärrys Javascript, voin nyt luoda interaktiivinen web elementti, että olen odottanut toteuttaa minun hankkeita: viesti laatikot-tai ponnahdusikkunoita.

modaali eli valintaikkuna on viestikenttä, joka ilmestyy selaimeen tietyn käyttäjän vuorovaikutteisuuden jälkeen. Ennen kuin sukellamme yksityiskohtiin luoda modaalinen laatikko sivuston HTML, CSS, ja Javascript, Katsotaanpa ensin tarkistaa eri viestilaatikoita, että saatat törmännyt.

hälytykset

hälytys on tyypillisesti selaimeen lukittu viestikenttä, joka vaatii käyttäjän vastauksen tai vuorovaikutuksen ennen kuin se voidaan poistaa ja katoaa sivulta. Ehkä haluat asiakkaan hyväksyvän tiedot (Käyttöehdot) tai sivu itsessään vahvistaa lomakkeen täyttämisen. Ennen kuulutuksen hylkäämistä asiakas ei kuitenkaan voi olla vuorovaikutuksessa muun sivun kanssa.

popup

popup on selaimeen ilmestyvä tahmainen (think ’sticks’ sivulle, not Sticky like candy) viestilaatikko, joka ei vaadi välitöntä vuorovaikutusta tai huomiota. Jos käyttäjä haluaa niiden katoavan, hänen täytyy sulkea ponnahdusikkuna tai olla vuorovaikutuksessa sen kanssa, mutta muun sivun vuorovaikutteisuus on edelleen toiminnassa. Ilmoitukset ovat esimerkki ponnahdusikkunasta.

Growl Notification/Flash Notice

A growl notification is a popup that dismisses itself after an associated period of time. These are sometimes also referred to as flash notices. Käyttäjä voi olla vuorovaikutuksessa murina — ilmoituksen — ehkä hylkää viestikentän aikaisin, tai klikkaa painiketta sisällä ilmoituksen-tai voi jättää huomiotta ja se katoaa, kun ajastin vanhenee. Kuten ponnahdusikkuna, murina-ilmoitus antaa asiakkaalle mahdollisuuden jatkaa vuorovaikutusta muun sivun kanssa. Esimerkki tästä on sähköposti-tai someilmoitus.

Lightbox/Theatre

Valolaatikko tai teatteri on viestilaatikko, joka tyypillisesti suurentaa selaimessa jo ollutta sisältöä, jotta käyttäjä voi keskittyä siihen. Yleinen käyttötapaus on galleriassa näkyvä kuva tai kuvasarja. Kun käytetään valolaatikkoa tai teatteria, jossa on useita sisältöpaloja, sitä pidetään ”lukittuna”, kun käyttäjä voi selata siihen liittyvää sisältöä itse valolaatikossa sen sijaan, että palaisi alkuperäiselle sivulle ja sen jälkeen napsauttaisi sarjan seuraavaa kuvaa suurentaakseen.

popover/hovercard

yksi pienemmistä viestilaatikoista, popover tai hovercard ilmestyy näytölle vain, kun käyttäjä leijuu hiirellään valitun alueen yllä. Nämä viestilaatikot voivat sisältää ohjeita tai selityksiä, jotka koskevat painiketta tai säiliötä, jonka päällä käyttäjä parhaillaan leijuu; ne voivat myös sisältää esikatselun saatavilla oleviin tietoihin, Jos käyttäjä napsauttaa linkkiä.

modaali/valintaikkuna

lopuksi modaali tai valintaikkuna on viestikenttä, joka mahdollistaa sivun interaktiivisuuden ilman, että navigoit pois selaimen nykyisestä sisällöstä. Modaalinen laatikko ei ole lukittu näyttöön (ts., asiakas voi navigoida pois siitä ilman tarvittavaa vuorovaikutusta), vaikka se on tyypillisesti käyttäjän painopiste (perustuu tyyli ruutuun). Useimmissa tapauksissa, jos käyttäjä haluaa hylätä modaali, he voivat yksinkertaisesti sulkea laatikon mukana painiketta, tai napsauta ulkopuolella modaali. Esimerkki modaalista on, kun käyttäjän on täytettävä lomake tai annettava tiettyjä tietoja hakukyselyä varten, mutta et halua niiden siirtyvän toiselle sivulle.

modaalin toteuttaminen

jotta voit luoda ja toteuttaa modaalin sivullesi, on kolme vaihetta, jotka sinun täytyy suorittaa toiminnallisuutta varten:

1. HTML: markup luodaksesi modaalisen elementin
2. CSS: styling nähdäksesi, miltä modaalinen näyttää ja näkyy sivulla
3. JavaScript: sijoittamalla tapahtumakuuntelijat niin, että modaali näkyy/katoaa riippuen käyttäjän interaktiivisuudesta

HTML

yksinkertaisimmassa modaalissa tarvitsemme painikkeen (tai mitä tahansa sivuelementtiä haluat), jota Käyttäjä voi napsauttaa aktivoidakseen modaalin, todellisen modaalin, ja todennäköisesti haluat toteuttaa close-painikkeen modaalissa.

<button> click me, I make a modal</button><div class="modal">
<div class="modal-content">
<span class="close-btn">&times;</span>
<p>this is the text inside the modal</p>
</div>
</div>

edellä mainitusta näkee, että HTML: ään ilmestyy painike sekä A-modaali, jossa on kolme CSS-luokkaa: modalmodal-btn ja close-btn. Jokainen näistä sisällytetään alla olevaan CSS: ään. Ensimmäinen div on kantasäiliö, joka sisältää koko modaalin, jonka luokka on modal. Sisäisesti meillä on div, joka sisältää sisällön modaali itse: painike sulkea modaali span ja teksti sisällä ptag.

nopeana Sivuhuomautuksena voit myös toteuttaa otsikoita ja alatunnisteita modaalissasi yksinkertaisesti luomalla lisää divs: iä HTML-ja edelleen CSS-luokissa stailaustarkoituksiin. Esimerkiksi:

<div class="modal">
<div class="modal-header">
<span class="close-btn">&times;</span>
<h1>I am the Header</h1>
</div>
<div class="modal-content">
<p>this is the text inside the modal</p>
</div>
<div class="modal-footer">
<h2>I am the Footer</h2>
</div>
</div>

CSS

tyylitelläksemme jokaisen yksinkertaisen modaalimme HTML: n elementin, meidän on luotava siihen liittyvät CSS-luokat: .modal.modal-content, ja .close-btn. Edelleen, näet alla, että on myös CSS mukana luoda animaatio modaali.

.modal {
display: none;
position: fixed; 
padding-top: 50px;
left: 0; 
top: 0;
width: 100%;
height: 100%; 
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}.modal-content {
position: relative; 
background-color: white;
padding: 20px; 
margin: auto; 
width: 75%; 
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}.close-btn {
float: right; 
color: lightgray; 
font-size: 24px; 
font-weight: bold;
}.close-btn:hover {
color: darkgray;
}@-webkit-keyframes animatetop {
from {top:-300px; opacity:0} 
to {top:0; opacity:1}
}@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}

edellä mainituissa luokissa on stailaus jokaiselle HTML: ssä luomallemme elementille.

.modal luokalla itsellään on attribuutteja, jotka määrittävät, miten se käsittelee itse modaalin takana olevaa sivua: leveys ja korkeus verrattuna sivun takana valintaikkuna, väri (tässä esimerkissä käytetään osittain läpinäkymätön harmaa) ja näkyvyysasetus, jotta voimme vaihtaa sen Javascript kun käyttäjä napsauttaa painiketta.

varsinaiselle valintaikkunalle on myös erillinen stailaus .modal-content: sen sijoittaminen taustatyyliä vasten, itse valintaikkunan taustaväri, pehmuste, ja tässä esimerkissä on animaatio mukana niin, että modaali putoaa alas sivun yläreunasta.

edelleen tyyliteltiin .close-btn Luokka, joka kelluu”x”oikealla, ja .close-btn:hover, kun käyttäjä leijuu Sulje-painikkeen päällä, väri muuttuu. Selkeyden, käyttäjä voi klikata ulkopuolella modaali sulkea valintaikkuna sama kuin klikkaamalla Sulje-painiketta. Luomme tapahtuman kuuntelija molemmat vaihtoehdot meidän Javascript.

tämä tuskin raapaisee pintaa CSS: ssä, jonka pystyi toteuttamaan itse. Voit vapaasti säätää edellä mainitun koodin parhaiten omiin tarpeisiisi.

Javascript

lopuksi tarvitaan vielä jonkin verran JavaScriptiä, jotta modaalin toiminnallisuus saadaan luotua.

let modalBtn = document.getElementById("modal-btn")let modal = document.querySelector(".modal")let closeBtn = document.querySelector(".close-btn")modalBtn.onclick = function(){
modal.style.display = "block"
}closeBtn.onclick = function(){
modal.style.display = "none"
}window.onclick = function(e){
if(e.target == modal){
modal.style.display = "none"
}
}

olemme valinneet HTML: stä useita olioita ja määränneet ne muuttujiksi: a modal-btnmodal itse ja close-btn. Sitten on luotu tapahtumien kuuntelijoita onclick tapahtumia. Kun käyttäjä napsauttaa modal-btn, näyttötyyli on asetettu "block”, mutta kun hän napsauttaa close-btn tai ikkunan ulkopuolella modaali (edustaa meidän tyyli puoliksi läpinäkymätön harmaa), näyttötyyli asetetaan "none". Tämä käytännössä piilottaa modaalit, kunnes ne klikkaavat modal-btn uudelleen.

kaiken kaikkiaan domin kanssa JavaScriptillä soittaminen on ollut aloittelevana koodarina uskomattoman hauskaa ja palkitsevaa. Toivottavasti yllä oleva koodi auttaa sinua toteuttamaan modaalit ja viestilaatikot myös itse. Joidenkin quick Googling, voit myös löytää lisää resursseja säätää modaalit ja valintaikkunat käyttötapaukset.

onnea matkaan, ja hyvää koodausta!