Widget Modal (Dialogfenster)

Live-Beispiel

HTML-Quelltext

<button id="modal-unique-show-button" type="button">Modal anzeigen</button>
<div class="modal micromodal-slide" id="modal-unique" aria-hidden="true" aria-live="assertive">
  <div class="modal__overlay" tabindex="-1" data-micromodal-close="">
    <div class="modal__container" role="dialog" aria-modal="true" aria-labelledby="modal-unique-title" aria-describedby="modal-unique-content">
      <header class="modal__header">
        <strong class="modal__title" id="modal-unique-title">Ein Titel</strong> 
        <button class="modal__close" aria-labelledby="modal-unique-ok" data-micromodal-close=""></button>
      </header>
      <div class="modal__content" id="modal-unique-content">
        <p>Inhalt des Modals. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
      </div>
      <footer class="modal__footer">
        <button class="modal__btn modal__btn-primary" id="modal-unique-ok" data-micromodal-close="">Schließen</button>
      </footer>
    </div>
  </div>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const modalShowButton = document.getElementById('modal-unique-show-button');
    
    if (modalShowButton) {
      modalShowButton.addEventListener( 'click', () => MicroModal.show('modal-unique', {}) );
    }
  });
</script>