GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen

Widget Modal via dialog-Element, mit Eingabe

Live-Beispiel

Ein Titel von dialog mit form

Inhalt des "dialog mit form". Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

All debug output

Result debug output

HTML-Quelltext

<!-- button -->
<button id="dialog-unique-show-button" type="button">Modal anzeigen</button>
<!-- dialog -->
<dialog id="dialog-unique">
  <form method="dialog">
    <header>
      <strong>Ein Titel von dialog mit form</strong> 
      <button aria-labelledby="dialog-unique-cancel" data-action-cancel="true" value="cancel-header"></button>
    </header>
    <div class="dialog-content">
      <p>Inhalt des "dialog mit form". Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      <label for="free-text-input" class="me-2">Texteingabe</label>
      <input type="text" id="free-text-input" name="free-text-input" />
    </div>
    <footer>
      <button id="dialog-unique-cancel" value="cancel-footer" class="me-auto">Abbrechen</button>
      <button type="submit" id="dialog-unique-confirm" value="initial value">Bestätigen</button>
    </footer>
  </form>
</dialog>
<!-- debug output -->
<div class="frame frame-type-gesis-web-2col grid-general">
  <div class="row">
    <div id="output-all" class="col">
      <h3>
        All debug output
      </h3>
    </div>
    <div id="output-result" class="col">
      <h3>
        Result debug output
      </h3>
    </div>
  </div>
</div>
<!-- script -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const dialogShowButtonElement = document.getElementById('dialog-unique-show-button');
    const dialogElement = document.getElementById('dialog-unique');
    if (dialogElement) {
      initializeDialog(dialogElement);
      
      const submitButton = dialogElement.querySelector('button[type="submit"]');
      const textInput = dialogElement.querySelector('#free-text-input');
      const allDebugOutput = document.getElementById('output-all');
      const resultDebugOutput = document.getElementById('output-result');
      
      // allow confirm-input-by-pressing-Enter-within-textInput-element
      textInput.addEventListener('keydown', event => {
        if (event.key === 'Enter') {
          //prevent default action, which in dialog-form case would effectively cancel, not confirm the dialog
          event.preventDefault();
          submitButton.click();
        }
      });
      
      submitButton.addEventListener('click', () => {
        submitButton.value = textInput.value;
        // add dialog-was-confirmed marker
        dialogElement.dataset.confirmed = "true";
      });
      
      dialogElement.addEventListener('close', event => {
        const returnValue = dialogElement.returnValue;
        
        const allDebugEntryString = `<pre class="border-3 border-top border-bottom">returnValue: "${returnValue}"</pre>`;
        allDebugOutput.insertAdjacentHTML('beforeend', allDebugEntryString);
        
        const dialogWasConfirmed = (dialogElement.dataset.confirmed === "true");
        let textInputValueHasChanged;
        let resultDebugOutputBorderColor;
        if (dialogWasConfirmed) {
          textInputValueHasChanged = (returnValue === dialogElement.dataset.initialTextInputValue) ? false : true;
          resultDebugOutputBorderColor = textInputValueHasChanged ? "success" : "warning";
        }
        else {
          textInputValueHasChanged = false;
          resultDebugOutputBorderColor = "danger";
        }
        
        const resultDebugEntryString = `<pre class="border-3 border-${resultDebugOutputBorderColor} border-top border-bottom">dialog confirmed?    ${dialogWasConfirmed}
input value changed? ${textInputValueHasChanged}
returnValue:         "${returnValue}"</pre>`;
        resultDebugOutput.insertAdjacentHTML('beforeend', resultDebugEntryString);
        
        // remove dialog-was-confirmed marker
        delete dialogElement.dataset.confirmed;
      });
      
      if (dialogShowButtonElement) {
        dialogShowButtonElement.addEventListener( 'click', () => {
          // populate text input element with initial or latest submit value
          textInput.value = submitButton.value;
          dialogElement.dataset.initialTextInputValue = textInput.value;
          dialogElement.showModal();
        });
      }
    }
  });
</script>

Initialisierungscode

// '#dialog-unique' is a <dialog>..</dialog> element, containing a form.
// By default, <dialog> elements are initially hidden
const dialogElement = document.getElementById('dialog-unique');

// initializeDialog enhances dialogElement so that a click outside the dialog window
// closes the modal
initializeDialog(dialogElement);

// dialogElement can then be shown with its showModal() method
dialogElement.showModal();