CSS-modalgenerator

Vad den genererade CSS:en täcker

Koden formaterar fem klasser:

• .modal-backdrop: fast helskärmslager, mörk halvtransparent bakgrund (rgba(17, 24, 39, .62)), centrerat rutnät och 24 px utrymme runt panelen.
• .modal-panel: vitt kort med bredden min(100%, Npx), din hörnradie, mjuk skugga och avklippta hörn.
• .modal-header: 4 px tjock accentlinje i din färg, därefter rubrikområdet med 20 px 24 px utfyllnad.
• .modal-body: innehållsområdet, med 18 px 24 px utfyllnad.
• .modal-actions: en högerjusterad rad med knappar och 10 px mellanrum.

Matchande HTML-struktur

CSS:en förväntar sig den här markupen:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Bekräfta</h2>
    </div>
    <div class="modal-body">
      <p>Är du säker på att du vill fortsätta?</p>
    </div>
    <div class="modal-actions">
      <button>Avbryt</button>
      <button>Fortsätt</button>
    </div>
  </div>
</div>

Håll panelen innanför bakgrunden: bakgrunden är det fasta lagret och panelen centreras inuti det. Öppna och stäng modalen genom att lägga till och ta bort bakgrunden från din applikationskod, eller växla dess visning.

Anpassning till små skärmar

Panelens bredd begränsas med min(100%, Npx), så en inställning på 520 px blir hela fönstrets bredd på en smal telefon, minus 24 px utrymme från bakgrunden. Åtgärdsraden förblir högerjusterad och långt innehåll rullar med sidan. Inga media queries behövs för de vanliga fallen.

Anteckningar och gränser

Generatorn producerar bara CSS. Den innehåller inget JavaScript för att öppna eller stänga modalen, hålla kvar tangentbordsfokus eller hantera ESC-tangenten. Lägg till den logiken i din applikation.

Rubriken behåller alltid sin 4 px tjocka accentlinje; om du inte behöver den, ta bort eller ändra färgen på regeln i den kopierade koden.