Struktur för modaldialoger
Bygg en centrerad modal med överliggande bakgrund, rullningsbart innehåll och stängningsknapp med hjälp av verktyg för fixerad positionering och z-index.
Struktur för modaldialoger är en gratis lektion i Tailwind CSS Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Tailwind CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad är en modal dialogruta
En modal dialogruta är en panel som lägger sig ovanpå sidan och fångar användarens uppmärksamhet för en specifik uppgift – en bekräftelse, ett formulär eller detaljerad information – innan användaren återgår till sidan under den.
En modal består av tre delar: ett bakgrundslager som tonar ned bakgrunden, en dialogpanel centrerad på skärmen och en stängningsfunktion (en knapp, Escape-tangenten eller ett klick på bakgrundslagret). Alla tre måste fungera tillsammans för att komponenten ska bli väl utformad och tillgänglig.
Bakgrundslager över hela skärmen
Bakgrundslagret tonar ned sidans innehåll bakom den modala dialogrutan och riktar användarens uppmärksamhet mot dialogrutan. Använd fixed inset-0 bg-black/50 z-40 för att täcka hela visningsområdet med ett 50 procent ogenomskinligt svart lager.
Bakgrundslagret bör vara ett separat element från dialogpanelen, så att du kan animera dem oberoende av varandra. När användaren klickar på bakgrundslagret ska den modala dialogrutan stängas – detta görs med en JavaScript-klickhanterare på bakgrundslagrets element.
<div
id="modal-backdrop"
class="fixed inset-0 bg-black/50 z-40"
onclick="closeModal()">
</div>Centrera dialogpanelen
Dialogpanelen ligger i en centreringsbehållare som använder fixed inset-0 flex items-center justify-center z-50 p-4. Behållaren täcker hela visningsområdet som en flexbehållare och centrerar sitt enda underordnade element – dialogrutan – både horisontellt och vertikalt.
p-4 ger dialogrutan tillräckligt med utrymme från skärmens kanter på små skärmar, så att den inte ligger direkt mot sidorna på mobila enheter.
<!-- 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>Dialogrubrik med stängningsknapp
Den modala dialogrutans rubrik innehåller dialogens titel och en stängningsknapp. Använd flex items-center justify-between px-6 py-4 border-b border-gray-100 för att placera titeln och stängningsknappen i varsin ände av rubrikraden.
Titeln använder text-lg font-semibold text-gray-900 och stängningsknappen är en liten ikonknapp längst till höger. Knappen måste ha aria-label='Close modal' för skärmläsaranvändare som inte kan se ×-ikonen.
<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>Dialogens brödtext
Den modala dialogrutans brödtext innehåller dialogens huvudsakliga innehåll. Använd px-6 py-5 för bekväma marginaler. För långt innehåll begränsar du höjden med max-h-96 overflow-y-auto, så att dialogrutan inte blir högre än visningsområdet.
Brödtext använder text-sm text-gray-600 leading-relaxed för lättlästa avstånd mellan stycken. Lägg till ikoner eller illustrationer för att förtydliga bekräftelse- och varningsdialogrutor visuellt.
<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>Dialogsidfot med åtgärdsknappar
Den modala dialogrutans sidfot innehåller åtgärdsknapparna. Använd flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-100 för att högerjustera knapparna och visuellt skilja dem från innehållet i brödtexten.
Placera den sekundära åtgärden (Avbryt) till vänster om den primära åtgärden (Bekräfta/Ta bort), i enlighet med den rumsliga konventionen att den säkra åtgärden finns till vänster och den destruktiva åtgärden till höger.
<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>Visa och dölja den modala dialogrutan
Den modala dialogrutan är från början dold med hidden på både bakgrundslagret och centreringsbehållaren. När den aktiveras tar JavaScript bort hidden från båda elementen och lägger till overflow-hidden på body för att förhindra rullning av bakgrunden medan dialogrutan är öppen.
Stängningsfunktionen återställer alla tre åtgärderna. Koppla utlösaren till valfri knapp med en onclick-hanterare.
<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>Rullningsbar modal för långt innehåll
När den modala dialogrutans innehåll är längre än den tillgängliga höjden i visningsområdet ska endast brödtexten vara rullningsbar, medan rubrik och sidfot ligger kvar. Tillämpa max-h-screen overflow-hidden flex flex-col på dialogpanelen och flex-1 overflow-y-auto på brödtextsektionen.
Detta förhindrar att den modala dialogrutan växer utanför skärmen och håller åtgärdsknapparna synliga hela tiden, utan att användaren behöver rulla förbi innehållet.
<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>Storleksvarianter för modala dialogrutor
Modala dialogrutor finns i olika storlekar beroende på innehållet. Styr storleken med max-w-* på dialogpanelen:
- Liten:
max-w-sm– för enkla bekräftelsedialogrutor - Medelstor:
max-w-lg– för formulär och måttligt omfattande innehåll - Stor:
max-w-2xl– för detaljerade vyer eller komplexa formulär - Fullstor:
max-w-5xl– för bildvisare eller innehåll med många olika element
Inkludera alltid minst w-full, så att den modala dialogrutan anpassas korrekt på små skärmar även när maxbredden är stor.
<!-- 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-roller för tillgängliga modala dialogrutor
En tillgänglig modal kräver specifika ARIA-attribut. Lägg till role='dialog' aria-modal='true' på dialogpanelen, så att skärmläsare förstår att det är en modal dialogruta och att resten av sidans innehåll är inaktivt.
Koppla dialogens titel till panelen med aria-labelledby som pekar på rubrikens id. Då kan skärmläsare läsa upp dialogens namn när fokus flyttas in i den. För modala dialogrutor utan synlig titel använder du aria-label direkt på dialogelementet.
<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>Sätt ihop hela den modala dialogrutan
En komplett modalimplementation har två HTML-sektioner: bakgrundslagret och centreringsbehållaren med dialogpanelen inuti. Båda är från början dolda med hidden.
Utlösarknappen finns någonstans i sidans innehåll. När användaren klickar på den visas båda elementen, rullning av body låses och fokus flyttas in i dialogrutan. När dialogrutan stängs (med knappen, bakgrundslagret eller Escape) döljs båda elementen igen och rullning av body återställs.
<!-- 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>Snabbtest
Testa dina kunskaper om begreppen i Tailwind CSS Mastery från den här lektionen.
Sammanfattning av lektionen
I den här lektionen har du lärt dig att modal struktur består av ett bakgrundslager (fixed inset-0 bg-black/50 z-40) och en centreringsbehållare (fixed inset-0 flex items-center justify-center z-50) med dialogpanelen inuti; rullningsbara modala dialogrutor använder flex flex-col max-h-[90vh] med flex-1 overflow-y-auto på brödtexten; samt att ARIA-attributen role='dialog' aria-modal='true' aria-labelledby krävs för tillgänglighet med skärmläsare. Härnäst animerar vi övergångarna när den modala dialogrutan öppnas och stängs.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Struktur för modaldialoger” gratis?
Ja – hela texten till ”Struktur för modaldialoger” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Tailwind CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Tailwind CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Struktur för modaldialoger”?
Bygg en centrerad modal med överliggande bakgrund, rullningsbart innehåll och stängningsknapp med hjälp av verktyg för fixerad positionering och z-index. Ni övar på Tailwind CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Tailwind CSS Academy?
Du behöver inga förkunskaper. Utbildningen i Tailwind CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Struktur för modaldialoger”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Tailwind CSS Academy-lektionen?
Ja. Varje Tailwind CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Struktur för modaldialoger
- Animation för att öppna och stänga modaler
- Dropdownmenykomponent
- Tillgängliga modaler och dropdownmenyer