Structuur van een modal dialoogvenster
Bouw een gecentreerde modal met overlay-achtergrond, scrollbaar contentgebied en sluitknop met fixed-positionering en z-index-utilities.
Structuur van een modal dialoogvenster is een gratis Tailwind CSS Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Tailwind CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat is een modale dialoog
Een modale dialoog is een overlaypaneel dat boven op de pagina verschijnt om de aandacht van de gebruiker op een specifieke taak te richten — een bevestiging, een formulier of gedetailleerde informatie — voordat de gebruiker terugkeert naar de onderliggende pagina.
Een modaal venster bestaat uit drie onderdelen: een achtergrondoverlay die de achtergrond donkerder maakt, het dialoogpaneel in het midden van het scherm en een sluitmogelijkheid (een knop, de Escape-toets of een klik op de achtergrond). Alle drie moeten samenwerken voor een verzorgde, toegankelijke component.
Achtergrondoverlay over het volledige scherm
De achtergrondoverlay maakt de pagina-inhoud achter het modale venster donkerder, zodat de aandacht van de gebruiker naar de dialoog gaat. Gebruik fixed inset-0 bg-black/50 z-40 om de volledige viewport te bedekken met een voor 50% ondoorzichtige zwarte laag.
De achtergrondoverlay moet een afzonderlijk element zijn van het dialoogpaneel, zodat je ze onafhankelijk kunt animeren. Een klik op de achtergrond moet het modale venster sluiten — dit bereik je met een JavaScript-klikhandler op het achtergrondelement.
<div
id="modal-backdrop"
class="fixed inset-0 bg-black/50 z-40"
onclick="closeModal()">
</div>Het dialoogpaneel centreren
Het dialoogpaneel staat in een container voor centrering met fixed inset-0 flex items-center justify-center z-50 p-4. Deze container bedekt de volledige viewport als flexcontainer en centreert zijn enige kind — het dialoogvenster — zowel horizontaal als verticaal.
Met p-4 krijgt de dialoog op kleine schermen voldoende ruimte tot de schermranden, zodat deze mobiele schermen niet raakt.
<!-- Centering container -->
<div class="fixed inset-0 flex items-center justify-center z-50 p-4">
<!-- Dialog panel -->
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg">
<!-- Modal content -->
</div>
</div>Dialoogkop met sluitknop
De kop van het modale venster bevat de titel van de dialoog en een sluitknop. Gebruik flex items-center justify-between px-6 py-4 border-b border-gray-100 om de titel en de sluitknop aan tegenovergestelde uiteinden van de koprij te plaatsen.
De titel gebruikt text-lg font-semibold text-gray-900 en de sluitknop is een kleine pictogramknop helemaal rechts. De knop moet aria-label='Close modal' hebben voor gebruikers van schermlezers die het ×-pictogram niet kunnen zien.
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
<h2 class="text-lg font-semibold text-gray-900" id="modal-title">
Confirm Action
</h2>
<button
onclick="closeModal()"
aria-label="Close modal"
class="p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100
rounded-lg transition-colors">
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>Inhoud van de dialoogtekst
De hoofdtekst van het modale venster bevat de belangrijkste inhoud van de dialoog. Gebruik px-6 py-5 voor comfortabele binnenruimte. Beperk bij lange inhoud de hoogte met max-h-96 overflow-y-auto, zodat het modale venster niet hoger wordt dan de viewport.
Gebruik voor tekst in de hoofdtekst text-sm text-gray-600 leading-relaxed voor goed leesbare alinea-afstanden. Voeg pictogrammen of illustraties toe voor visuele duidelijkheid in bevestigings- en waarschuwingsdialogen.
<div class="px-6 py-5">
<div class="flex items-start gap-4">
<!-- Warning icon -->
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
<svg class="w-6 h-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
</svg>
</div>
<div>
<p class="text-base font-semibold text-gray-900">Delete this record?</p>
<p class="mt-1 text-sm text-gray-600 leading-relaxed">
This action cannot be undone. All data associated with this record will be permanently removed from our servers.
</p>
</div>
</div>
</div>Dialoogvoet met actieknoppen
De voet van het modale venster bevat de actieknoppen. Gebruik flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-100 om de knoppen rechts uit te lijnen en ze visueel van de hoofdtekst te scheiden.
Plaats de secundaire actie (Annuleren) links van de primaire actie (Bevestigen/Verwijderen), volgens de ruimtelijke conventie waarbij de veilige actie links en de destructieve actie rechts staat.
<div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-100">
<button
onclick="closeModal()"
class="px-4 py-2 text-sm font-semibold text-gray-700 border border-gray-300
rounded-lg hover:bg-gray-50 transition-colors">
Cancel
</button>
<button
class="px-4 py-2 text-sm font-semibold text-white bg-red-600
rounded-lg hover:bg-red-700 transition-colors">
Delete Record
</button>
</div>Het modale venster tonen en verbergen
Het modale venster begint verborgen met hidden op zowel de achtergrondoverlay als de container voor centrering. Wanneer het wordt geactiveerd, verwijdert JavaScript hidden van beide elementen en voegt het overflow-hidden toe aan de body om scrollen op de achtergrond te voorkomen terwijl het modale venster open is.
De sluitfunctie draait alle drie de bewerkingen terug. Koppel de trigger aan een willekeurige knop met een onclick-handler.
<script>
const modal = document.getElementById('modal');
const backdrop = document.getElementById('modal-backdrop');
function openModal() {
modal.classList.remove('hidden');
backdrop.classList.remove('hidden');
document.body.classList.add('overflow-hidden');
}
function closeModal() {
modal.classList.add('hidden');
backdrop.classList.add('hidden');
document.body.classList.remove('overflow-hidden');
}
// Escape key closes the modal
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') closeModal();
});
</script>Scrollbaar modaal venster voor lange inhoud
Wanneer de inhoud van een modaal venster hoger is dan de beschikbare viewporthoogte, maak je alleen de hoofdtekst scrollbaar, terwijl de kop en voet vast blijven staan. Pas max-h-screen overflow-hidden flex flex-col toe op het dialoogpaneel en flex-1 overflow-y-auto op het gedeelte met de hoofdtekst.
Zo voorkom je dat het modale venster buiten beeld groeit en blijven de actieknoppen altijd zichtbaar zonder dat de gebruiker voorbij de inhoud hoeft te scrollen.
<div class="fixed inset-0 flex items-center justify-center z-50 p-4">
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-lg
max-h-[90vh] flex flex-col">
<!-- Fixed header -->
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-100 flex-shrink-0">
<h2 class="text-lg font-semibold">Terms of Service</h2>
<button onclick="closeModal()" aria-label="Close">×</button>
</div>
<!-- Scrollable body -->
<div class="flex-1 overflow-y-auto px-6 py-5">
<p class="text-sm text-gray-600 leading-relaxed">
Very long terms of service content that may exceed the viewport height...
<!-- many paragraphs -->
</p>
</div>
<!-- Fixed footer -->
<div class="flex justify-end gap-3 px-6 py-4 border-t border-gray-100 flex-shrink-0">
<button onclick="closeModal()" class="px-4 py-2 text-sm font-semibold text-gray-700 border border-gray-300 rounded-lg">Decline</button>
<button class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Accept</button>
</div>
</div>
</div>Varianten voor de grootte van modale vensters
Modale vensters hebben verschillende afmetingen, afhankelijk van hun inhoud. Regel de grootte met max-w-* op het dialoogpaneel:
- Klein:
max-w-sm— voor eenvoudige bevestigingsdialogen - Gemiddeld:
max-w-lg— voor formulieren en gemiddelde hoeveelheden inhoud - Groot:
max-w-2xl— voor gedetailleerde weergaven of complexe formulieren - Volledig:
max-w-5xl— voor afbeeldingsviewers of uitgebreide inhoud
Neem altijd minimaal w-full op, zodat het modale venster op kleine schermen passend krimpt, ook wanneer de maximale breedte groot is.
<!-- Small modal -->
<div class="bg-white rounded-xl shadow-2xl w-full max-w-sm p-6">
<p class="text-sm text-gray-700">Are you sure?</p>
<div class="flex justify-end gap-3 mt-4">
<button class="px-3 py-1.5 text-xs font-semibold border border-gray-300 rounded-lg">No</button>
<button class="px-3 py-1.5 text-xs font-semibold text-white bg-red-600 rounded-lg">Yes, delete</button>
</div>
</div>ARIA-rollen voor toegankelijkheid van modale vensters
Een toegankelijk modaal venster vereist specifieke ARIA-attributen. Voeg role='dialog' aria-modal='true' toe aan het dialoogpaneel, zodat schermlezers weten dat het om een modaal venster gaat en dat de rest van de pagina niet actief is.
Verbind de titel van de dialoog met het paneel door met aria-labelledby te verwijzen naar de id van de kop. Hierdoor kunnen schermlezers de naam van de dialoog voorlezen wanneer de focus erin komt. Gebruik voor modale vensters zonder zichtbare titel rechtstreeks aria-label op het dialoogelements.
<div
role="dialog"
aria-modal="true"
aria-labelledby="dlg-title"
class="bg-white rounded-2xl shadow-2xl w-full max-w-lg">
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
<h2 id="dlg-title" class="text-lg font-semibold text-gray-900">
Confirm Deletion
</h2>
<button onclick="closeModal()" aria-label="Close dialog" class="p-1 text-gray-400 hover:text-gray-600 rounded-lg">×</button>
</div>
<div class="px-6 py-5">
<p class="text-sm text-gray-600">This will permanently delete the selected item.</p>
</div>
<div class="flex justify-end gap-3 px-6 py-4 border-t border-gray-100">
<button onclick="closeModal()" class="px-4 py-2 text-sm font-semibold border border-gray-300 rounded-lg">Cancel</button>
<button class="px-4 py-2 text-sm font-semibold text-white bg-red-600 rounded-lg">Delete</button>
</div>
</div>Het volledige modale venster samenstellen
Een complete implementatie van een modaal venster heeft twee HTML-gedeelten: de achtergrondoverlay en de container voor centrering met daarin het dialoogpaneel. Beide beginnen verborgen met hidden.
De triggerknop staat ergens in de pagina-inhoud. Wanneer erop wordt geklikt, worden beide elementen getoond, wordt scrollen op de body vergrendeld en verplaatst de focus zich naar het modale venster. Wanneer het wordt gesloten (met de knop, de achtergrond of Escape), worden beide elementen opnieuw verborgen en wordt scrollen op de body hersteld.
<!-- Trigger -->
<button onclick="openModal()" class="px-4 py-2 bg-red-600 text-white text-sm font-semibold rounded-lg">Delete Account</button>
<!-- Backdrop -->
<div id="modal-backdrop" onclick="closeModal()"
class="hidden fixed inset-0 bg-black/50 z-40"></div>
<!-- Dialog -->
<div id="modal" role="dialog" aria-modal="true" aria-labelledby="m-title"
class="hidden fixed inset-0 flex items-center justify-center z-50 p-4">
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-md">
<div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
<h2 id="m-title" class="text-lg font-semibold text-gray-900">Delete Account</h2>
<button onclick="closeModal()" aria-label="Close" class="p-1 text-gray-400 hover:text-gray-600 rounded">×</button>
</div>
<div class="px-6 py-5">
<p class="text-sm text-gray-600">Are you sure? This cannot be undone.</p>
</div>
<div class="flex justify-end gap-3 px-6 py-4 border-t border-gray-100">
<button onclick="closeModal()" class="px-4 py-2 text-sm font-semibold border border-gray-300 rounded-lg">Cancel</button>
<button class="px-4 py-2 text-sm font-semibold text-white bg-red-600 rounded-lg">Delete</button>
</div>
</div>
</div>Korte controle
Test je begrip van de concepten van Tailwind CSS Mastery uit deze les.
Samenvatting van de les
In deze les heb je geleerd dat de structuur van een modaal venster bestaat uit een achtergrondoverlay (fixed inset-0 bg-black/50 z-40) en een container voor centrering (fixed inset-0 flex items-center justify-center z-50) met daarin het dialoogpaneel; dat scrollbare modale vensters flex flex-col max-h-[90vh] gebruiken met flex-1 overflow-y-auto op de hoofdtekst; en dat de ARIA-attributen role='dialog' aria-modal='true' aria-labelledby vereist zijn voor toegankelijkheid met schermlezers. Hierna animeren we de overgangen voor het openen en sluiten van modale vensters.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 30
- Lessen
- 120
Veelgestelde vragen
Is de les “Structuur van een modal dialoogvenster” gratis?
Ja — de volledige tekst van “Structuur van een modal dialoogvenster” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Tailwind CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Tailwind CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Structuur van een modal dialoogvenster”?
Bouw een gecentreerde modal met overlay-achtergrond, scrollbaar contentgebied en sluitknop met fixed-positionering en z-index-utilities. Je oefent met Tailwind CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Tailwind CSS Academy te beginnen?
Ervaring vooraf is niet nodig. Tailwind CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Structuur van een modal dialoogvenster”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Tailwind CSS Academy?
Ja. Elke les over Tailwind CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Structuur van een modal dialoogvenster
- Openings- en sluitanimatie van een modal
- Dropdownmenucomponent
- Toegankelijke modals en dropdowns