Entwicklerportal

CodeGewölbe

Kostenlose Sammlung für Entwickler, Admins und Website-Betreiber: Snippets, VelinStyle-Komponenten, VelinScript-Automationen und Security-Rezepte — copy-paste-fertig.

VelinStyle Komponenten

Modal Dialog

Was bekomme ich?

HTML CSS JS WCAG AA

Zugänglicher Modal-Dialog mit Fokus-Falle.

Fortgeschritten 5 Min.

Code

HTML html

<dialog class="velin-modal" id="demo-modal">
  <h2>Titel</h2>
  <p>Inhalt</p>
  <button type="button" data-modal-close>Schließen</button>
</dialog>
<button type="button" data-modal-open="demo-modal">Modal öffnen</button>

CSS css

.velin-modal {
  border: none;
  border-radius: 1rem;
  padding: 1.25rem;
  max-width: 28rem;
}
.velin-modal::backdrop {
  background: color-mix(in srgb, #000 45%, transparent);
}

JS javascript

document.querySelectorAll('[data-modal-open]').forEach((btn) => {
  btn.addEventListener('click', () => {
    document.getElementById(btn.dataset.modalOpen)?.showModal();
  });
});

Als Datei laden Im Kundenportal speichern (bald)