nyligen gjorde jag hoppet från att skapa Fullstack Ruby-appar till att arbeta med Javascript. Som du kanske redan vet tillåter Javascript användare eller klienter att interagera med en webbsida och dynamiskt göra nytt innehåll till DOM baserat på användarinteraktivitet. Jämfört med kodning i Ruby on Rails (där varje rerender kräver en helsidesuppdatering) tog möjligheten att rerender olika sidelement baserat på användarinteraktioner med Javascript mina frontend-utvecklingsfärdigheter från 1994 och in i nutiden. Med min rudimentära förståelse av Javascript kan jag nu skapa ett interaktivt webbelement som jag har sett fram emot att implementera i mina projekt: meddelanderutor — eller popup-fönster.
en modal eller dialogruta är en meddelanderuta som visas i webbläsaren efter viss angiven användarinteraktivitet. Innan vi dyker in i detaljerna för att skapa en modal ruta för din webbplats med HTML, CSS och Javascript, låt oss först granska de olika typerna av meddelanderutor som du kan stöta på.
varningar
en varning är en meddelanderuta, vanligtvis låst i webbläsaren, som kräver ett användarsvar eller interaktion innan det kan avfärdas och försvinner från sidan. Kanske vill du att klienten ska bekräfta information (användarvillkor) eller själva sidan bekräftar att ett formulär har fyllts i. Men tills varningen avvisas kan klienten inte interagera med resten av sidan.
popup
en popup är en klibbig (tänk ”pinnar” till sidan, inte klibbig som godis) meddelanderuta som visas i webbläsaren som inte kräver omedelbar interaktion eller uppmärksamhet. Om en användare vill att de ska försvinna måste de stänga eller interagera med popup-fönstret vid den tiden, men interaktiviteten på resten av sidan är fortfarande funktionell. Meddelanden är ett exempel på en popup.
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. Användaren kan interagera med growl anmälan — kanske för att avvisa meddelanderutan tidigt, eller att klicka på en knapp i anmälan — eller kan välja att ignorera och det kommer att försvinna efter timern löper ut. Som en popup tillåter growl-meddelandet klienten att fortsätta att interagera med resten av sidan. Ett exempel på detta är ett meddelande om e-post eller sociala medier.
Lightbox/Theatre
en Lightbox eller en teater är en meddelanderuta som vanligtvis förstorar innehåll som redan var tillgängligt i webbläsaren för att en användare ska kunna fokusera på det. Ett vanligt användningsfall är en bild eller en serie bilder som visas i ett galleri. När en lightbox eller teater används med flera delar av innehåll, anses det ’låst’ när en användare kan navigera genom tillhörande innehåll i själva lightbox, istället för att återvända till den ursprungliga sidan och därefter klicka på nästa bild i serien för att förstora.
popover / hovercard
en av de mindre meddelanderutorna, ett popover eller ett hovercard visas bara på skärmen när en användare svävar musen över ett valt område. Dessa meddelanderutor kan innehålla instruktioner eller förklaringar angående knappen eller behållaren som användaren för närvarande svävar över; de kan också innehålla en förhandsgranskning av tillgänglig information om användaren klickar på en länk.
Popover/Hovercard
Modal / Dialog box
slutligen är en modal eller dialogruta en meddelanderuta som tillåter ytterligare interaktivitet på sidan utan att navigera bort från det aktuella innehållet i webbläsaren. En modal ruta är inte låst till skärmen (dvs., klienten kan navigera bort från den utan en nödvändig interaktion), men det är vanligtvis användarens fokus (baserat på din styling av lådan). I de flesta fall, om en användare vill avvisa Modalen, kan de helt enkelt stänga rutan med en medföljande knapp eller klicka utanför Modalen. Ett exempel på en modal är när en användare behöver fylla i ett formulär eller tillhandahålla specifik information för en sökfråga, men du vill inte att de ska navigera till en annan sida.
implementering av en modal
för att skapa och implementera en modal på din sida finns det tre steg som du måste slutföra för funktionalitet:
- html: markup för att skapa modalelementet
- CSS: styling för att bestämma hur din modal ser ut och visas på sidan
- Javascript: placera händelselyssnare så att Modalen visas/försvinner beroende på din användarinteraktivitet
HTML
För de enklaste modalerna behöver vi en knapp (eller vilket sidelement du föredrar) som en användare kan klicka på för att aktivera Modalen, den faktiska Modalen, och du kommer sannolikt att vilja implementera en stängningsknapp i Modalen.
<button> click me, I make a modal</button><div class="modal">
<div class="modal-content">
<span class="close-btn">×</span>
<p>this is the text inside the modal</p>
</div>
</div>
i ovanstående kan du se att vi har en knapp som kommer att visas i vår HTML, liksom a a modal, med tre CSS-klasser: modalmodal-btn och close-btn. Var och en av dessa kommer att ingå i CSS nedan. Den första div är den överordnade behållaren som innehåller hela Modalen med en klass av modal. Internt har vi en div som innehåller innehållet för själva Modalen: knappen för att stänga Modalen i span och texten i en ptaggen.
som en snabb åt sidan kan du också implementera sidhuvud och sidfot i din modal genom att helt enkelt skapa fler divs inom HTML och ytterligare CSS-klasser för stylingändamål. Exempelvis:
<div class="modal">
<div class="modal-header">
<span class="close-btn">×</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
för att utforma vart och ett av elementen i vår enkla modals HTML måste vi skapa tillhörande CSS-klasser: .modal.modal-content och .close-btn. Vidare kan du se nedan att det också ingår CSS för att skapa animering för Modalen.
.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}
}
i ovanstående klasser har vi styling för vart och ett av de element som vi skapade i vår HTML.
.modal klassen själv har attribut som bestämmer hur den behandlar sidan bakom själva Modalen: en bredd och höjd jämfört med sidan bakom dialogrutan, en färg (det här exemplet använder en halv ogenomskinlig grå) och en synlighetsinställning så att vi kan växla den i vårt Javascript när en användare klickar på knappen.
för den faktiska dialogrutan har vi också separat styling i .modal-content: placera den mot bakgrundsstylingen, en bakgrundsfärg för dialogrutan själv, vaddering, och i det här exemplet ingår animering så att Modalen faller ner från toppen av sidan.
vidare utformade vi en.close-btn klass som flyter ett”x”till höger och med.close-btn:hover, när användaren svävar över stängningsknappen ändras färgen. För tydligheten kan användaren klicka utanför Modalen för att stänga dialogrutan på samma sätt som att klicka på knappen Stäng. Vi skapar en händelselyssnare för båda alternativen i vår Javascript.
detta skrapar knappt ytan på CSS som du kan implementera på egen hand. Känn dig fri att justera ovanstående kod för att bäst passa dina egna behov.
Javascript
Slutligen måste vi skriva lite Javascript för att skapa modalens funktionalitet.
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"
}
}
Vi har valt flera objekt från vår HTML och tilldelat dem till variabler: a modal-btnmodalsjälv och close-btn. Sedan har vi skapat evenemangslyssnare föronclick händelser. När en användare klickar på modal-btn, är visningsstilen inställd på "block”, men när de klickar på close-btn eller fönstret utanför Modalen (representerad i vår styling som den halv ogenomskinliga grå), är visningsstilen därefter inställd på "none". Detta döljer effektivt Modalen tills de klickar på modal-btn igen.
Modal tryckt på skärmen
sammantaget har det varit otroligt roligt och givande att spela med dom med JavaScript som en början kodare. Förhoppningsvis ovanstående kod kommer att hjälpa dig att genomföra modaler och meddelanderutor på egen hand också. Med lite snabb Googling kan du också hitta ytterligare resurser för att justera modaler och dialogrutor för dina användningsfall.
lycka till där ute, och glad kodning!