GESIS Leibniz-Institut für Sozialwissenschaften: Homepage aufrufen

Widget Modal via dialog-Element, rein informativ

Live-Beispiel

Ein Titel

Inhalt des Modals. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

HTML-Quelltext

<!-- button -->
<button id="dialog-unique-show-button" type="button">Modal anzeigen</button>
<!-- dialog -->
<dialog id="dialog-unique">
  <header>
    <strong>Ein Titel</strong> 
    <button aria-labelledby="dialog-unique-close" data-action-close="true"></button>
  </header>
  <div class="dialog-content">
    <p>Inhalt des Modals. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
  </div>
  <footer>
    <button id="dialog-unique-close" data-action-close="true">Schließen</button>
  </footer>
</dialog>
<!-- script -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const dialogShowButtonElement = document.getElementById('dialog-unique-show-button');
    const dialogElement = document.getElementById('dialog-unique');
    if (dialogElement) {
      initializeDialog(dialogElement);
      
      if (dialogShowButtonElement) {
        dialogShowButtonElement.addEventListener( 'click', () => dialogElement.showModal() );
      }
    }
  });
</script>

Initialisierungscode

// '#dialog-unique' is a <dialog>..</dialog> element.
// 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();