jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML-tools

Gratis Dialog Modal HTML Generator

Genereer een native HTML dialog modal met open- en sluitknoppen.

Tool laden...

Wat is Dialog Modal HTML Generator?

Het HTML-dialog-element biedt een native door de browser beheerd modaal dialoogvenster dat geen externe bibliotheken vereist. De showModal()-methode opent een modaal dat interactie met de rest van de pagina blokkeert, terwijl show() een niet-modale dialoog opent. Voor statische sites elimineert het dialog-element de noodzaak van een JavaScript-framework of aangepaste modale logica.

Snel antwoord

Genereer een native HTML-dialogmodaal met triggerknop, sluitknop, inhoudsgebied en achtergrondstyling. Werkt zonder JavaScript-bibliotheken in alle moderne browsers met het native dialog-element.

Last updated: 2026-06-11

Beperkingen

  • Oudere browsers zoals Safari 14 en Firefox 92 en lager ondersteunen het dialog-element niet native. Er is geen polyfill inbegrepen in de gegenereerde opmaak.
  • Complexe focus-trapping-scenario's zoals geneste dialogen of dialogen met ingebedde scrollbare inhoud kunnen extra JavaScript nodig hebben voor volledige toegankelijkheid.
  • De ::backdrop-pseudo-element styling wordt niet overgenomen van de dialog-stijlen. Achtergrond- en dialog-stijlen moeten als afzonderlijke CSS-regels worden gedeclareerd.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Voer de knoptekst en de kop voor uw modale dialoog in.
  2. Schrijf de body-inhoud voor de modaal met behulp van platte tekst of HTML-tags.
  3. Kies of u showModal() wilt gebruiken voor een blokkerende modaal of show() voor een niet-modale overlay.
  4. Kopieer de gegenereerde HTML, CSS en JavaScript naar uw pagina. Alle drie delen zijn nodig om de modaal te laten werken.

Waarvoor je het kunt gebruiken

  • Een contactformuliermodaal toevoegen aan een landingspagina zonder een UI-bibliotheek te gebruiken.
  • Een afbeeldingslichtbox maken met het dialog-element met een sluitknop en achtergrond.
  • Een bevestigingsdialoog tonen v锟斤拷r het verzenden van een formulier op een statische site.

Gebruik

Praktische voorbeelden

Voorbeeld

Contactmodaal voor landingspagina

Een productlandingspagina gebruikt een dialog met showModal() om een contactformulier weer te geven. De achtergrond dimt de pagina achter het formulier en buiten de dialog klikken of op Escape drukken sluit deze.

Voorbeeld

Galerij-afbeeldingsdialoog

Een fotografieportfolio opent afbeeldingen in een dialog met showModal(). Elke afbeelding heeft een sluitknop en klikken op de achtergrond sluit de dialog zonder JavaScript-event handlers.

Veelgemaakte fouten

  • De dialog-HTML en CSS toevoegen maar de JavaScript-open- en sluitaanroepen vergeten, waardoor de dialog verborgen en niet-functioneel blijft.
  • Het dialog::backdrop-pseudo-element niet stylen, waardoor de achtergrond transparant blijft en er geen visuele scheiding is tussen de modaal en de pagina.
  • De sluitknop moeilijk vindbaar maken of helemaal verwijderen, waardoor gebruikers in de modaal worden vastgezet.

Verificatie

  1. Open de dialog en druk herhaaldelijk op Tab om te bevestigen dat de focus binnen de dialog blijft en niet ontsnapt naar de achtergrondpagina.
  2. Druk op Escape om de dialog te sluiten en controleer of het toetsenbordfocus terugkeert naar de triggerknop die de dialog opende.

FAQ

Vragen over Dialog Modal HTML Generator

Welke browsers ondersteunen het dialog-element?

Alle moderne browsers ondersteunen het dialog-element vanaf 2025. Geen polyfill nodig voor huidige Chrome-, Firefox-, Safari- en Edge-releases.

Kan ik de achtergrond van een dialog stylen?

Ja. Gebruik het ::backdrop-pseudo-element in CSS. Bijvoorbeeld: dialog::backdrop { background: rgba(0, 0, 0, 0.5); } cre锟絜rt een semi-transparante donkere overlay achter de modaal.

Wat is het verschil tussen show() en showModal()?

showModal() opent de dialog als een modaal die interactie met de rest van de pagina blokkeert en de achtergrondoverlay weergeeft. show() opent een niet-modale dialoog die interactie met andere paginaelementen toestaat terwijl de dialoog open blijft.

Zorgt het dialog-element voor focus trapping?

Ja. Wanneer een dialog wordt geopend met showModal(), vangt de browser automatisch het toetsenbordfocus binnen de dialog. Door op Tab te drukken, worden focusbare elementen in de dialog doorlopen zonder de achtergrondpagina te bereiken.

Gerelateerde tools

Meer html-tools

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool

Probeer ook

Probeer ook