DEPRECATED Widget Modal via div-Element

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>

Initialisierungscode (mittels globaler Referenzen)

// MicroModal.show('some-html-element-id') expects as its first parameter
// the id of an HTML element which adheres to the HTML structure exemplified
// by above HTML snippet
MicroModal.show('modal-unique');

// besides the automatically set-up button UI button close handler,
// the modal can also be programmatically closed with MicroModal.close('some-html-element-id')
setTimeout( () => MicroModal.close('modal-unique') , 1000);