<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>
// 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);