CSS-modalgenerator

Wat de gegenereerde CSS dekt

De code styleert vijf klassen:

• .modal-backdrop: vaste fullscreen-laag, donkere halfdoorzichtige achtergrond (rgba(17, 24, 39, .62)), gecentreerde grid en 24 px ruimte rond het paneel.
• .modal-panel: wit kaartje met een breedte van min(100%, Npx), jouw hoekradius, een zachte schaduw en afgekapte hoeken.
• .modal-header: 4 px dikke accentbalk in jouw kleur, daaronder de ruimte voor de kop met 20 px 24 px padding.
• .modal-body: het inhoudsgebied, met 18 px 24 px padding.
• .modal-actions: een rechts uitgelijnde rij knoppen met 10 px tussenruimte.

Bijpassende HTML-structuur

De CSS verwacht deze markup:

<div class="modal-backdrop">
  <div class="modal-panel">
    <div class="modal-header">
      <h2>Bevestigen</h2>
    </div>
    <div class="modal-body">
      <p>Weet je zeker dat je wilt doorgaan?</p>
    </div>
    <div class="modal-actions">
      <button>Annuleren</button>
      <button>Doorgaan</button>
    </div>
  </div>
</div>

Houd het paneel binnen de achtergrond: de achtergrond is de vaste laag en het paneel wordt erin gecentreerd. Open en sluit de modal door de achtergrond vanuit je applicatiecode in te voegen en te verwijderen, of door de weergave ervan om te schakelen.

Aanpassen aan kleine schermen

De paneelbreedte wordt begrensd met min(100%, Npx), dus een instelling van 520 px wordt op een smalle telefoon de volledige viewportbreedte, minus de 24 px ruimte van de achtergrond. De actierij blijft rechts uitgelijnd en lange inhoud scrolt mee met de pagina. Voor de gangbare gevallen zijn geen media queries nodig.

Opmerkingen en grenzen

De generator levert alleen CSS op. Er zit geen JavaScript bij om de modal te openen of te sluiten, het toetsenbordfocus vast te houden of de ESC-toets af te handelen. Voeg die logica toe in je applicatie.

De kop houdt zijn 4 px dikke accentbalk te allen tijde; als je die niet nodig hebt, verwijder of verkleur je de regel in de gekopieerde code.