Nylig gjorde jeg hoppet fra å lage fullstack Ruby apps til å jobbe Med Javascript. Som du kanskje allerede vet, Tillater Javascript brukere eller klienter å samhandle med en nettside og dynamisk gjengi nytt innhold TIL DOM basert på brukerinteraktivitet. Sammenlignet med koding I Ruby on Rails (der hver rerender krever en fullsideoppdatering), tok muligheten til å rerender ulike sideelementer basert på brukerinteraksjoner med Javascript mine frontend-utviklingsferdigheter ut av 1994 og inn i nåtiden. Med min rudimentære forståelse Av Javascript kan jeg nå lage et interaktivt webelement som jeg har gledet meg til å implementere i prosjektene mine: meldingsbokser – eller popups.
en modal, eller dialogboks, er en meldingsboks som vises i nettleseren etter en bestemt brukerinteraktivitet. Før vi dykker inn i detaljene for å lage en modal boks for nettstedet ditt MED HTML, CSS og Javascript, la oss først gjennomgå de ulike typer meldingsbokser som du kan komme over.
Varsler
et varsel er en meldingsboks, vanligvis låst i nettleseren, som krever et brukerrespons eller interaksjon før det kan bli avvist og forsvinner fra siden. Kanskje du vil at klienten skal bekrefte informasjon (Vilkår for Bruk) eller selve siden bekrefter utfylling av et skjema. Men til varselet er avvist, kan ikke klienten samhandle med resten av siden.
Varselboks Varselboks
popup
en popup er en klebrig (tenk «pinner» til siden, ikke klebrig som godteri) meldingsboks som vises i nettleseren som ikke krever umiddelbar interaksjon eller oppmerksomhet. Hvis en bruker vil at de skal forsvinne, må de lukke eller samhandle med popup-vinduet på den tiden, men interaktiviteten til resten av siden er fortsatt funksjonell. Varsler 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. Brukeren kan samhandle med growl varsling — kanskje for å avvise meldingsboksen tidlig, eller å klikke på en knapp i varselet — eller kan velge å ignorere, og det vil forsvinne etter at tiden utløper. Som en popup, gjør growl varsling tillater klienten å fortsette å samhandle med resten av siden. Et eksempel på dette er en e-post eller sosiale medier varsling.
lysboks/teater
en lysboks eller et teater er en meldingsboks som vanligvis forstørrer innhold som allerede var tilgjengelig i nettleseren slik at en bruker kan fokusere på det. Et vanlig brukstilfelle er et bilde eller en serie bilder som vises i et galleri. Når en lysboks eller teater er ansatt med flere deler av innholdet, anses det som låst når en bruker kan navigere gjennom det tilknyttede innholdet i selve lysboksen, i stedet for å gå tilbake til den opprinnelige siden og deretter klikke på neste bilde i serien for å forstørre.
Lysboks/Teater
popover/hovercard
en av de mindre meldingsbokser, en popover eller et hovercard vises bare på skjermen når en bruker svever musen over et valgt område. Disse meldingsboksene kan inneholde instruksjoner eller forklaringer om knappen eller beholderen som brukeren for øyeblikket svinger over; de kan også inneholde en forhåndsvisning av informasjon som er tilgjengelig hvis brukeren klikker på en kobling.
Popover / Hovercard figcaption >
modal / dialog box
endelig er en modal eller dialogboks en meldingsboks som tillater ytterligere interaktivitet av siden uten å navigere bort fra gjeldende innhold i nettleseren. En modal boks er ikke låst til skjermen (dvs., kan klienten navigere bort fra det uten en nødvendig interaksjon), men det er vanligvis brukerens fokus (basert på styling av boksen). I de fleste tilfeller, hvis en bruker ønsker å avvise modal, kan de bare lukke boksen med en gitt knapp, eller klikk utenfor modal. Et eksempel på en modal er når en bruker trenger å fylle ut et skjema eller gi spesifikk informasjon for et søk, men du ikke vil at de skal navigere til en annen side.
Modal/Dialogboks
implementering av en modal
for å opprette og implementere en modal på siden din, er det tre trinn du må fullføre for funksjonalitet:
- html: markup for å lage modalelementet
- css: styling for å bestemme hvordan modal ser ut og vises på siden
- javascript: plassering av hendelseslyttere slik at modalet vises/forsvinner avhengig av brukerens interaktivitet
HTML
for den enkleste modalen trenger vi en knapp (eller hvilket sideelement du foretrekker) som en bruker kan klikke på for å aktivere modalen, den faktiske modalen, og du vil sannsynligvis ønske å implementere en lukkeknapp 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 det ovennevnte kan du se at vi har en knapp som vil vises i VÅR HTML, samt en a modal, med tre CSS-klasser: modalmodal-btn og close-btn. Hver AV DISSE vil bli inkludert i CSS nedenfor. Den første div er den overordnede beholderen som inneholder hele modal med en klasse av modal. Internt har vi en div som inneholder innholdet for modalet selv: knappen for å lukke modalet ispan og teksten i enp – taggen.
som en rask side, kan du også implementere overskrifter og bunntekster i modal ved å opprette flere divs I HTML og videre CSS klasser for styling formål. Eksempelvis:
<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
for å style hvert av elementene i VÅR enkle modal HTML, må vi opprette tilhørende CSS klasser: .modal.modal-content, og .close-btn. Videre kan du se nedenfor at DET også ER CSS inkludert for å lage animasjon for modal.
.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 de ovennevnte klassene har vi styling for hvert av elementene vi opprettet i HTML.
.modal klassen selv har attributter som bestemmer hvordan den behandler siden bak modalen selv: en bredde og høyde i forhold til siden bak dialogboksen, en farge (dette eksemplet bruker en semi-ugjennomsiktig grå) og en synlighetsinnstilling slik at vi kan bytte Den i Javascript når en bruker klikker på knappen.
for selve dialogboksen, har vi også egen styling i .modal-content: posisjonering det mot bakgrunnen styling, en bakgrunnsfarge for selve dialogboksen, padding, og i dette eksemplet er det animasjon inkludert slik at modal faller ned fra toppen av siden.
videre stylet vi en .close-btn klasse som flyter en ‘x’ til høyre, og med .close-btn:hover, når brukeren svinger over lukkeknappen, endres fargen. For klarhet kan brukeren klikke utenfor modal for å lukke dialogboksen det samme som å klikke på lukk-knappen. Vi lager en eventlytter for begge alternativene i Javascript.
dette knapt riper overflaten AV CSS som du kan implementere på egen hånd. Føl deg fri til å justere koden ovenfor som best passer dine egne behov.
Javascript
Til Slutt må vi skrive Noe Javascript for å skape funksjonaliteten til modal.
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 VÅR HTML og tilordnet dem til variabler: en modal-btnmodalseg selv, og close-btn. Deretter har vi opprettet hendelseslyttere foronclick hendelser. Når en bruker klikker på modal-btn, er visningsstilen satt til "block”, men når de klikker på close-btn eller vinduet utenfor modal (representert i vår styling som semi-ugjennomsiktig grå), blir visningsstilen deretter satt til "none". Dette skjuler effektivt modalen til de klikker på modal-btn igjen.
Modal Trykt på Skjermen /figcaption>
totalt sett har det vært utrolig morsomt og givende å spille med dom med javascript som en begynnende koder. Forhåpentligvis vil koden ovenfor hjelpe deg med å implementere modaler og meldingsbokser på egen hånd også. Med litt Rask Googling kan du også finne flere ressurser for å justere modaler og dialogbokser for brukstilfeller.
Lykke til der ute, og god koding!