popup

een popup is een kleverig (denk ‘kleverig’ aan de pagina, niet kleverig als snoep) berichtenvenster dat in de browser verschijnt en geen directe interactie of aandacht vereist. Als een gebruiker wil dat ze verdwijnen, moeten ze op dat moment de pop-up sluiten of ermee communiceren, maar de interactiviteit van de rest van de pagina is nog steeds functioneel. Notificaties zijn een voorbeeld van een 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. De gebruiker kan interageren met de growl melding-misschien om het berichtvak vroeg te ontslaan, of om te klikken op een knop in de melding — of kan ervoor kiezen om te negeren en het zal verdwijnen na de timer verloopt. Net als een pop-up, de growl kennisgeving laat de client om te blijven communiceren met de rest van de pagina. Een voorbeeld hiervan is een e-mail of social media melding.

Lightbox/Theater

Een lichttafel of een theater is een bericht dat er meestal vergroot content die al beschikbaar zijn in de browser voor een gebruiker om zich te concentreren op. Een veelvoorkomend geval is een afbeelding, of reeks afbeeldingen weergegeven in een galerij. Wanneer een lightbox of theater wordt gebruikt met meerdere stukken van de inhoud, wordt het beschouwd als ‘vergrendeld’ wanneer een gebruiker kan navigeren door de bijbehorende inhoud binnen de lightbox zelf, in plaats van terug te keren naar de oorspronkelijke pagina en daarna te klikken op de volgende afbeelding in de serie om te vergroten.

Popover/Profielkaart

Een van de kleinere bericht dozen, een popover of een profielkaart alleen op het scherm wordt weergegeven wanneer een gebruiker met de muisaanwijzer over een geselecteerd gebied. Deze berichtvakken kunnen instructies of uitleg bevatten met betrekking tot de knop of container waar de gebruiker momenteel over zweeft; ze kunnen ook een voorbeeld van beschikbare informatie bevatten als de gebruiker op een link klikt.

Modal/Dialoog Venster

tot slot, een modaal of dialoogvenster wordt een berichtvenster met de mogelijkheid voor verdere interactie van de pagina zonder navigatie afstand van de huidige inhoud in de browser. Een modal box is niet vergrendeld op het scherm (d.w.z., kan de client weg te navigeren zonder een vereiste interactie), hoewel het meestal de focus van de gebruiker (op basis van uw styling van de doos). In de meeste gevallen, als een gebruiker het modaal wil verwerpen, kunnen ze gewoon het vak sluiten met een meegeleverde knop, of buiten het modaal klikken. Een voorbeeld van een modaal is wanneer een gebruiker een formulier moet invullen of specifieke informatie moet verstrekken voor een zoekopdracht, maar u niet wilt dat ze naar een andere pagina navigeren.

Implementatie van een Modaal

om het creëren en implementeren van een modale op uw pagina, zijn er drie stappen die je moet voltooien voor functionaliteit:

1. HTML-markup voor het maken van de modale element
2. CSS: styling om te bepalen hoe uw modaal ziet en op de pagina wordt weergegeven
3. Javascript: het plaatsen van gebeurtenisluisteraars zodat het modaal verschijnt/verdwijnt afhankelijk van uw gebruikersinteractiviteit

HTML

voor de eenvoudigste Modalen hebben we een knop nodig (of welk pagina-element dan ook dat u verkiest) waarop een gebruiker kan klikken om het modaal te activeren, het werkelijke modaal, en u zult waarschijnlijk een sluitknop binnen het modaal willen implementeren.

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

in het bovenstaande kunt u zien dat we een knop hebben die zal verschijnen in onze HTML, evenals een modaal, met drie CSS-klassen: modalmodal-btn, en close-btn. Elk van deze zal worden opgenomen in de CSS hieronder. De eerste div is de ouder container die het gehele modaal bevat met een klasse van modal. Intern hebben we een div die de inhoud van het modaal zelf bevat: de knop om het modaal te sluiten in de span en de tekst binnen een ptag.

even terzijde, u kunt ook kop-en voetteksten implementeren in uw modal door simpelweg meer div ‘ s te maken binnen de HTML en andere CSS klassen voor styling doeleinden. Bijvoorbeeld:

<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

om elk van de elementen in de HTML van onze eenvoudige modal op te stylen, moeten we de bijbehorende CSS-klassen aanmaken: .modal.modal-content, en .close-btn. Verder, kunt u hieronder zien dat er ook CSS opgenomen om animatie te maken voor de 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}
}

in de bovenstaande klassen hebben we styling voor elk van de elementen die we in onze HTML hebben gemaakt.

De.modal klasse zelf heeft attributen die bepalen hoe het de pagina achter het modaal zelf behandelt: een breedte en hoogte in vergelijking met de pagina achter het dialoogvenster, Een kleur (dit voorbeeld maakt gebruik van een semi-ondoorzichtig grijs) en een zichtbaarheidsinstelling zodat we het in ons Javascript kunnen schakelen wanneer een gebruiker op de knop klikt.

voor het eigenlijke dialoogvenster hebben we ook een aparte styling in .modal-content: positioneren tegen de achtergrond styling, een achtergrondkleur voor het dialoogvenster zelf, opvulling, en in dit voorbeeld is er Animatie opgenomen zodat het modaal vanaf de bovenkant van de pagina naar beneden valt.

verder hebben we een .close-btn klasse opgemaakt die een ‘x’ naar rechts drijft, en met .close-btn:hover, wanneer de gebruiker over de knop Sluiten zweeft, zal de kleur veranderen. Voor de duidelijkheid, de gebruiker kan klikken buiten het modaal om het dialoogvenster te sluiten hetzelfde als te klikken op de knop Sluiten. We zullen een event listener maken voor beide opties in ons Javascript.

Dit krast nauwelijks het oppervlak van CSS dat je zelf zou kunnen implementeren. Voel je vrij om de bovenstaande code aan te passen aan uw eigen behoeften.

Javascript

ten slotte moeten we Javascript schrijven om de functionaliteit van het modaal te creëren.

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

we hebben verschillende objecten uit onze HTML geselecteerd en toegewezen aan variabelen: a modal-btn, de modal zelf, en de close-btn. Vervolgens hebben we gebeurtenisluisteraars gemaakt voor onclick gebeurtenissen. Wanneer een gebruiker op de modal-btn klikt, wordt de weergavestijl ingesteld op "block”, maar wanneer ze op de close-btn of het venster buiten het modaal klikken (in onze opmaak weergegeven als de semi-ondoorzichtige grijze), wordt de weergavestijl daarna ingesteld op "none". Dit verbergt effectief het modaal totdat ze opnieuw op modal-btn klikken.

over het algemeen is het spelen met de Dom met Javascript ongelooflijk leuk en lonend geweest als een beginnende coder. Hopelijk zal de bovenstaande code u helpen modals en message boxes te implementeren op uw eigen te. Met wat snel Googlen kunt u ook andere bronnen vinden om modals en dialoogvensters aan te passen voor uw use cases.

veel geluk daar, en gelukkig coderen!