for nylig lavede jeg springet fra at oprette fullstack Ruby apps til at arbejde med Javascript. Som du måske allerede ved, giver Javascript brugere eller klienter mulighed for at interagere med en hjemmeside og dynamisk gengive nyt indhold til DOM baseret på brugerinteraktivitet. Sammenlignet med kodning i Ruby on Rails (hvor hver rerender kræver en fuldsideopdatering), bragte evnen til at rerender forskellige sideelementer baseret på brugerinteraktioner med Javascript mine frontend-udviklingsevner ud af 1994 og ind i nutiden. Med min rudimentære forståelse af Javascript kan jeg nu oprette et interaktivt internetelement, som jeg har set frem til at implementere i mine projekter: meddelelsesbokse — eller popups.

en modal eller dialogboks er en meddelelsesboks, der vises i Bro.sereren efter en bestemt brugerinteraktivitet. Før vi dykke ned i detaljerne i at skabe en modal boks til din hjemmeside med HTML, CSS og Javascript, lad os først gennemgå de forskellige typer af meddelelsesbokse, som du kan komme på tværs.

advarsler

en advarsel er et meddelelsesfelt, der typisk er låst inde i Bro.sereren, der kræver et brugersvar eller interaktion, før det kan afvises og forsvinder fra siden. Måske vil du have klienten til at anerkende oplysninger (brugsbetingelser), eller selve siden bekræfter udfyldelsen af en formular. Indtil advarslen afvises, kan klienten imidlertid ikke interagere med resten af siden.

popup

en popup er en klæbrig (tænk ‘stikker’ til siden, ikke klæbrig som slik) meddelelsesboks, der vises i bro.ser, der ikke kræver øjeblikkelig interaktion eller opmærksomhed. Hvis en bruger vil have dem til at forsvinde, skal de lukke eller interagere med popup på det tidspunkt, men interaktiviteten af resten af siden er stadig funktionel. Meddelelser er et eksempel 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. Brugeren kan interagere med knurremeddelelsen — måske for at afvise meddelelsesboksen tidligt, eller for at klikke på en knap i meddelelsen — eller kan vælge at ignorere, og den forsvinder, når timeren udløber. Som en popup tillader knurremeddelelsen klienten at fortsætte med at interagere med resten af siden. Et eksempel på dette er en e-mail eller meddelelse om sociale medier.

lysboks / teater

en lysboks eller et teater er en meddelelsesboks, der typisk forstørrer indhold, der allerede var tilgængeligt i Bro.sereren, så en bruger kan fokusere på det. En almindelig brugssag er et billede eller en række billeder, der vises i et galleri. Når en lysboks eller teater er ansat med flere stykker indhold, betragtes det som ‘låst’, når en bruger kan navigere gennem det tilknyttede indhold i selve lysboksen i stedet for at vende tilbage til den originale side og derefter klikke på det næste billede i serien for at forstørre.

popover/hovercard

en af de mindre meddelelsesbokse, en popover eller et hovercard vises kun på skærmen, når en bruger svæver musen over et valgt område. Disse meddelelsesbokse kan indeholde instruktioner eller forklaringer vedrørende den knap eller beholder, som brugeren i øjeblikket svæver over; de kan også indeholde en forhåndsvisning af tilgængelige oplysninger, hvis brugeren klikker på et link.

modal / dialogboks

endelig er en modal eller dialogboks en meddelelsesboks, der tillader yderligere interaktivitet på siden uden at navigere væk fra det aktuelle indhold i bro.sereren. En modal boks er ikke låst til skærmen (dvs., klienten kan navigere væk fra det uden en påkrævet interaktion), selvom det typisk er brugerens fokus (baseret på din styling af kassen). I de fleste tilfælde, hvis en bruger ønsker at afvise modal, de kan blot lukke boksen med en medfølgende knap, eller klik uden for modal. Et eksempel på en modal er, når en bruger skal udfylde en formular eller give specifikke oplysninger til en søgeforespørgsel, men du ikke vil have dem til at navigere til en anden side.

implementering af en modal

for at oprette og implementere en modal på din side er der tre trin, du skal udføre for funktionalitet:

1. html: markup for at oprette det modale element
2. CSS: styling for at bestemme, hvordan din modal ser ud og vises på siden
3. JavaScript: placering af begivenhedslyttere, så Modalen vises/forsvinder afhængigt af din brugerinteraktivitet

HTML

for de enkleste modeller har vi brug for en knap (eller hvilket sideelement du foretrækker), som en bruger kan klikke på for at aktivere Modalen, den faktiske modal, og du vil sandsynligvis implementere en tæt knap i Modalen.

<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>

i ovenstående kan du se, at vi har en knap, der vises inden for vores HTML, samt en a-modal, med tre CSS-klasser: modalmodal-btn og close-btn. Hver af disse vil blive inkluderet i CSS nedenfor. Den første div er den overordnede beholder, der indeholder hele Modalen med en klasse af modal. Internt har vi en div, der indeholder indholdet til selve Modalen: knappen for at lukke Modalen i span og teksten inden for et ptag.

som en hurtig side kan du også implementere sidehoveder og sidefødder i din modal ved blot at oprette flere divs inden for HTML og yderligere CSS-klasser til stylingformål. Eksempel:

<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

for at style hvert af elementerne i vores enkle modals HTML, Skal vi oprette de tilknyttede CSS-klasser: .modal.modal-content og .close-btn. Yderligere kan du se nedenfor, at der også er CSS inkluderet for at oprette animation til 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 ovenstående klasser har vi styling for hvert af de elementer, vi oprettede i vores HTML.

.modal klassen selv har attributter, der bestemmer, hvordan den behandler siden bag selve Modalen: en bredde og højde i forhold til siden bag dialogboksen, en farve (dette eksempel bruger en semi-uigennemsigtig grå) og en synlighedsindstilling, så vi kan skifte den i Vores Javascript, når en bruger klikker på knappen.

for den aktuelle dialogboks har vi også separat styling i .modal-content: placering af den mod baggrundsstylingen, en baggrundsfarve til selve dialogboksen, polstring, og i dette eksempel er der animation inkluderet, så Modalen falder ned fra toppen af siden.

desuden stylede vi en .close-btn klasse, der flyder en ‘H’ til højre, og med .close-btn:hover, når brugeren svæver over knappen Luk, ændres farven. For klarhedens skyld kan brugeren klikke uden for Modalen for at lukke dialogboksen det samme som at klikke på knappen Luk. Vi opretter en begivenhedslytter til begge muligheder i Vores Javascript.

dette ridser næppe overfladen af CSS, som du selv kunne implementere. Du er velkommen til at justere ovenstående kode, så den passer bedst til dine egne behov.

Javascript

endelig skal vi skrive noget Javascript for at skabe funktionaliteten af Modalen.

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 valgt flere objekter fra vores HTML og tildelt dem til variabler: amodal-btnmodalselv ogclose-btn. Derefter har vi oprettet begivenhedslyttere til onclick begivenheder. Når en bruger klikker på modal-btn, er displaystilen indstillet til "block”, men når de klikker på close-btn eller vinduet uden for Modalen (repræsenteret i vores styling som den semi-uigennemsigtige grå), indstilles displaystilen derefter til "none". Dette skjuler effektivt Modalen, indtil de klikker på modal-btn igen.