Modal Trigger

Die Modal-Trigger-Komponente öffnet ein modales Dialogfenster über einen zugehörigen Button. Der Inhalt des Dialogs wird innerhalb der Komponente in einem <template> definiert und erst beim Öffnen in ein global erzeugtes <dialog>-Element übertragen.

Das Element eignet sich für wiederverwendbare Dialoge wie Bearbeiten-Formulare, Bestätigungsdialoge oder einfache Hinweisfenster. Die Komponente ist unabhängig vom konkreten Einsatzzweck.

Die Verbindung zwischen Auslöser und Dialoginhalt erfolgt über den gemeinsamen Wrapper .js-modal-trigger. Dadurch sind keine IDs notwendig. Nach dem Schließen wird der Dialoginhalt wieder aus dem DOM entfernt und der Fokus — sofern möglich — auf den auslösenden Button zurückgesetzt.

Das Verhalten basiert auf nativen <dialog>-Funktionen und ergänzt diese um Fokusmanagement und eine generische Apply-Schnittstelle für optionale clientseitige Weiterverarbeitung.

Mit autofocus kann der initiale Fokus nach dem Öffnen des Dialogs gezielt auf ein Element gesetzt werden. Für normalerweise nicht fokussierbare Elemente, z. B. Überschriften, kann zusätzlich tabindex="-1" verwendet werden. Ohne autofocus wird das erste fokussierbare Element im Dialog fokussiert.

The modal trigger component opens a modal dialog via an associated button. The dialog content is defined within the component using a <template> element and is only transferred into a globally created <dialog> element when the modal is opened.

The element is suitable for reusable dialogs such as edit forms, confirmation dialogs, or simple informational messages. The component is independent of the specific use case.

The connection between the trigger and the dialog content is established through the shared wrapper .js-modal-trigger. This means no IDs are required. After the dialog is closed, its content is removed from the DOM again and the focus is returned to the triggering button where possible.

The behavior is based on native <dialog> functionality and extends it with focus management and a generic apply interface for optional client-side processing.

The autofocus attribute can be used to explicitly set which element receives initial focus after the dialog is opened. For elements that are not normally focusable, such as headings, tabindex="-1" can additionally be used to make them programmatically focusable. Without autofocus, the first focusable element inside the dialog will receive focus.

Beispiel

<div class="js-modal-trigger">
  <!-- Modal open button -->
  <button type="button" class="js-modal-open">Button</button>
  <!-- Modal template -->
  <template class="js-modal-template">

    <div class="modal-panel">
      <button type="button" class="modal-close js-modal-close button button--close"><span class="aural">Dialog schließen</span></button><!-- Modal close "X" -->
        <div class="modal-content">

                                <h2 class="title" tabindex="-1" autofocus="true">Modal content title</h2>
<form class="form--base">

    <fieldset >
        <legend >
                Example form
        </legend>
            <div class="form-check">
                <input class="form-check-input" type="radio" checked id="myCheckbox3791" name="example1" value="yes">
                <label class="form-check-label" for="myCheckbox3791">Yes</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" id="myCheckbox5523" name="example1" value="no">
                <label class="form-check-label" for="myCheckbox5523">No</label>
            </div>
    </fieldset>
    <div class="form-actions">            
        <button type="button" class="link js-modal-close">Cancel</button>
            
        <button type="submit" class="button button--light">Submit</button>
            
        <button type="button" class="button button--light js-modal-apply">Apply</button>
    </div>
</form>

      </div>
    </div>

  </template>
</div>

JS Klassen

.js-modal-trigger: Wrapper-Element, das den Auslöse-Button und das zugehörige <template> kapselt.
.js-modal-open: Button oder Element, das den Dialog öffnet.
.js-modal-template: Das <template>, dessen Inhalt beim Öffnen in den Dialog kopiert wird.
.js-modal-close: Schließt den aktuell geöffneten Dialog, z. B. über einen Abbrechen-Button oder ein X-Icon.
.js-modal-apply: Optionaler Button zum Übernehmen von Formulardaten ohne nativen Form-Submit. Die Komponente sammelt die Formulardaten und stellt sie über ein Custom Event zur Weiterverarbeitung bereit.

Custom Event modal:apply

Wird innerhalb des Dialogs ein Element mit .js-modal-apply geklickt, sammelt die Komponente die Formulardaten des Dialogs und löst das Custom Event modal:apply aus. Über dieses Event können andere Skripte die Daten weiterverarbeiten, ohne dass die Modal-Komponente selbst wissen muss, was mit den Daten passiert.

Beispiel

document.addEventListener("modal:apply", (event) => {
  const { data, formData, modal, trigger, applyButton } = event.detail;
  console.log(data);
});