Dialogen en modals zijn een integraal onderdeel van de meeste webapplicaties. Hoewel het met de hand bouwen ervan geen complexe taak is, wordt het wel snel vervelend voor elke webontwikkelaar. Het gebruikelijke alternatief voor het met de hand bouwen is om een ​​component te gebruiken die door iemand anders is gebouwd.

Er zijn echter een paar problemen met deze benadering. Er zijn zoveel opties dat het moeilijk wordt om te weten welk onderdeel het beste is om te gebruiken, en het uiterlijk van dergelijke componenten aanpassen kan soms net zo vervelend zijn als het maken van een dialoog met de hand. Gelukkig is er nog een alternatief: het HTML-dialoogelement.

Wat is het dialoogelement?

Het HTML-dialoogelement is een ingebouwde HTML-tag (zoals div of span), waarmee ontwikkelaars aangepaste dialoogvensters en modaliteiten kunnen maken. Het dialoogelement bestaat al sinds 2014 in Chrome en Opera, maar werd pas onlangs ondersteund door alle belangrijke browsers.

Waarom het dialoogelement gebruiken?

instagram viewer

De belangrijkste reden om het dialoogelement te gebruiken is gemak. Het maakt het gemakkelijk om dialogen te bouwen die ofwel inline ofwel als modal kunnen verschijnen, met niets meer dan een enkele HTML-tag en een paar regels JavaScript.

Het dialoogelement maakt het niet nodig om een ​​aangepast dialoogvenster te bouwen en te debuggen, of om de component van iemand anders te importeren. Het is ook heel gemakkelijk te stylen met CSS.

Browserondersteuning voor het dialoogvensterelement

Helaas zou browserondersteuning voor het dialoogelement beter kunnen. Het wordt ondersteund in de nieuwste versies van alle belangrijke browsers vanaf maart 2022, met enkele kanttekeningen.

Elke Firefox-browser die ouder is dan Firefox 98 zal het alleen ondersteunen als het handmatig is ingeschakeld in de browserinstellingen, en elke Safari-versie ouder dan Safari 15.4 ondersteunt het helemaal niet. Volledige browserondersteuningsdetails zijn beschikbaar op: kan ik gebruiken.

Gelukkig betekent dit niet dat het dialoogelement onbruikbaar is. Het Google Chrome-team houdt een polyfill bij die u kunt vinden op Github voor het dialoogelement dat er ondersteuning voor biedt, zelfs in browsers waar het niet standaard wordt ondersteund.

In zijn huidige vorm kan het dialoogelement toegankelijkheidsproblemen hebben, dus het kan geschikter zijn om een ​​aangepast dialoogonderdeel te gebruiken zoals: a11y-dialoog bij productietoepassingen.

Hoe het dialoogvensterelement te gebruiken

Om te demonstreren hoe u het dialoogelement gebruikt, gaat u het gebruiken om een ​​algemene websitefunctie te bouwen: een bevestigingsmodaliteit voor een verwijderknop.

Het enige dat nodig is om te volgen, is een enkel HTML-bestand.

1. Het HTML-bestand instellen

Begin met het maken van het genoemde bestand en noem het index.html.

Bepaal vervolgens de structuur van het HTML-bestand en geef wat basismeta-informatie over de pagina, zodat deze op alle apparaten correct wordt weergegeven.

Typ de volgende code in index.html:

<!DOCTYPE html>
<html lang="en">
<hoofd>
<meta-tekenset="UTF-8">
<meta http-equiv="X-UA-compatibel" inhoud="IE=edge">
<metanaam="uitkijk postje" inhoud="breedte = apparaatbreedte, initiële schaal = 1,0">
<titel>Dialoogvenster demo</title>
</head>
<stijl></style>


<lichaam></body>
<script></script>
</html>

Dat is alles wat nodig is voor dit project.

2. De opmaak schrijven

Schrijf vervolgens de opmaak voor de verwijderknop, evenals het dialoogelement.

Typ de volgende code in de body-tag van index.html:

<div klasse="knop-container">
<knop>
Verwijderen item
</button>
</div>
<dialoog>
<div>
 Weet je zeker dat je wil verwijderendeze item?
</div>
<div>
<knop klasse="dichtbij">
 Ja
</button>
<knop klasse="dichtbij">
 Nee
</button>
</div>
</dialog>

De bovenstaande HTML creëert:

  • Een verwijderknop.
  • Het dialoogelement.
  • Twee knoppen in het dialoogvenster.

Als index.html geopend is in uw browser, is het enige element dat zichtbaar is op het scherm de verwijderknop. Dit betekent niet dat er iets mis is, het dialoogelement heeft alleen een beetje JavaScript nodig om zichtbaar te worden.

3. JavaScript toevoegen

Schrijf nu de code die het dialoogvenster opent wanneer een gebruiker op de verwijderknop klikt, evenals code om het dialoogvenster te sluiten.

Typ het volgende in de scripttag van index.html:

const modaal = document.querySelector ("dialoogvenster")
document.querySelector(".knop-container knop").addEventListener("Klik", () => {
modaal.showModal();
});
const closeBtns = document.getElementsByClassName("close");
voor (btn of closeBtns) {
 btn.addEventListener("Klik", () => {
modaal.dichtbij();
 })
}

Deze code gebruikt de querySelector-methode om verwijzingen naar de knoppen en het dialoogvenster te krijgen. Het koppelt vervolgens een klikgebeurtenislistener aan elke knop.

Misschien ken je gebeurtenislisteners in JavaScript, die u zelf kunt gebruiken. De gebeurtenislistener die aan de verwijderknop is gekoppeld, roept de methode showModal() aan om het dialoogvenster weer te geven wanneer op de knop wordt geklikt.

Aan elke knop in de modal is een gebeurtenislistener gekoppeld die de methode close() gebruikt om het dialoogvenster te verbergen wanneer erop wordt geklikt.

Zelfs als er geen JavaScript is dat de methode close() in de code aanroept, kunnen gebruikers de modal ook sluiten door op de escape-toets op hun toetsenbord te drukken.

Nu dit JavaScript op zijn plaats is, als een gebruiker op de verwijderknop klikt, wordt de modal geopend en door op de ja of nee-knop te klikken, wordt de modal gesloten.

Dit is hoe de geopende modal eruit zou moeten zien:

Een ding om op te merken is dat het dialoog-element al met wat styling wordt geleverd, ook al is er geen CSS in index.html. Het modaal is al gecentreerd, het heeft een rand, de breedte is beperkt tot de inhoud en het heeft een standaard opvulling.

Gebruikers kunnen niet communiceren (klikken, selecteren) met iets op de achtergrond terwijl het modaal open is.

Het dialoogelement kan zichzelf ook weergeven als onderdeel van de stroom van de pagina in plaats van als een modaal. Om het uit te proberen, wijzigt u de eerste gebeurtenislistener in JavaScript als volgt:

document.querySelector(".knop-container knop").addEventListener("Klik", () => { modaal.show(); });

Het enige dat in deze code is veranderd, is dat de code de methode show() aanroept, in plaats van de methode showModal(). Wanneer een gebruiker nu op de knop Item verwijderen klikt, zou de modal als volgt inline moeten openen:

4. Styling toevoegen

Pas vervolgens het uiterlijk van het dialoogvenster en de achtergrond aan door CSS te schrijven.

De CSS verkleint de rand van het dialoogvenster, beperkt de maximale breedte en maakt vervolgens de achtergrond donkerder en voegt een beetje stijl toe aan de knoppen.

Het opmaken van het dialoogvenster zelf is eenvoudig, maar de achtergrond pseudo-klasse is nodig om opmaak toe te voegen die gericht is op de achtergrond van het dialoogvenster.

Plak de volgende code in de stijltag van index.html:

dialoog:: achtergrond {
 achtergrond: zwart;
ondoorzichtigheid: 0.5;
}
knop {
 grensradius: 2px;
 achtergrondkleur: wit;
 rand: 1px effen zwart;
 marge: 5px;
 doosschaduw: 1px 1px 2px grijs;
}
dialoog {
 max-breedte: 90vw;
 rand: 1px effen zwart;
}

Wanneer het dialoogvenster geopend is, zou het er nu als volgt uit moeten zien:

En je hebt een volledig functionele dialoog gebouwd.

Het dialoogelement is een geweldige manier om modaliteiten te bouwen

Met behulp van het HTML-dialoogelement dat onlangs in alle belangrijke browsers werd ondersteund, kunnen webontwikkelaars nu volledig functionele, gemakkelijk aanpasbare modals en dialogen met één HTML-tag en een paar regels JavaScript en zonder afhankelijk te zijn van een derde partij oplossing.

Het dialoogelement heeft een polyfill die wordt onderhouden door het Google Chrome-team, waardoor ontwikkelaars dialogen kunnen gebruiken in browserversies die dit niet ondersteunen.