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 JS WCAG AA

Zugänglicher Modal-Dialog als Web Component.

Fortgeschritten 5 Min.

Vorschau

Modal öffnen

Fokusfalle, Escape und Backdrop gehören zum WC.

Fertig

Code

HTML html

<button type="button" class="velin-btn velin-btn--primary"
        onclick="document.getElementById('myModal').open()">
  Modal öffnen
</button>

<velin-modal id="myModal" title="Modal-Titel">
  <p>Inhalt des Dialogs.</p>
  <button type="button" class="velin-btn velin-btn--primary" slot="footer"
          onclick="document.getElementById('myModal').close()">Fertig</button>
</velin-modal>

React (JSX) jsx

import { useRef } from 'react';
import { VelinModal } from '@velinstyle/react';
import '@birdapi/velinstyle/css';
import '@birdapi/velinstyle/bundle';

export function ModalExample() {
  const ref = useRef(null);
  return (
    <>
      <button type="button" className="velin-btn velin-btn--primary" onClick={() => ref.current?.open()}>
        Modal öffnen
      </button>
      <VelinModal ref={ref} title="Modal-Titel">
        <p>Inhalt des Dialogs.</p>
      </VelinModal>
    </>
  );
}

Als Datei laden Im Kundenportal speichern (bald)