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>