Uses Micromodal.js.
Each modal should have a unique id attribute and the relevant references updated.
<div class="modal" aria-hidden="true" id="modal-729e01e5-8244-4c7e-a975-73d681626acf">
<div class="modal__container" data-modal-close="modal-729e01e5-8244-4c7e-a975-73d681626acf">
<div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--729e01e5-8244-4c7e-a975-73d681626acf">
<header class="modal__header">
<h2 class="modal__title" id="modal__title--729e01e5-8244-4c7e-a975-73d681626acf">Default Modal</h2>
<button type="button" data-modal-close="modal-729e01e5-8244-4c7e-a975-73d681626acf" aria-label="Close Modal">×</button>
</header>
<div class="modal__content">
Optio harum facere dolor nisi impedit sunt totam est. Aliquam doloribus non quo officia doloremque qui saepe aut corporis. Laboriosam dolores magni qui non vitae. Nobis ut enim ratione recusandae perferendis asperiores beatae. Ducimus quisquam nostrum non tempore.
Dignissimos necessitatibus quod aut rem qui eum. Perspiciatis rerum numquam magnam corporis possimus accusantium assumenda ad minus. Dolores iste veniam aut sed nulla et temporibus voluptates.
Aut saepe vero quis aut exercitationem perspiciatis. Aliquid voluptate ut placeat qui. Ut dolores corrupti non nesciunt amet ullam et. Nesciunt amet quaerat recusandae voluptatem cupiditate totam placeat nisi iusto. Saepe quaerat enim exercitationem vitae tempore culpa atque. Fugiat molestiae sint est voluptas sed excepturi.
</div>
<div class="modal__footer">
Eos reiciendis omnis esse et omnis aut. Minima inventore soluta tempora. Sunt praesentium et ducimus aut.
</div>
</div>
</div>
</div>
<div class="{{modifier 'modal' modifiers}}" aria-hidden="true" id="modal-{{ uuid }}">
<div class="modal__container" data-modal-close="modal-{{ uuid }}">
<div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--{{ uuid }}">
<header class="modal__header">
<h2 class="modal__title" id="modal__title--{{ uuid }}">{{ title }}</h2>
<button type="button" data-modal-close="modal-{{ uuid }}" aria-label="Close Modal">×</button>
</header>
{{#> @partial-block}}
<div class="modal__content">
{{ content }}
</div>
{{/ @partial-block }}
{{#if footer }}
<div class="modal__footer">
{{ footer }}
</div>
{{/if}}
</div>
</div>
</div>