Uses Micromodal.js.
Each modal should have a unique id attribute and the relevant references updated.
<div class="modal" aria-hidden="true" id="modal-4b1636e6-7048-4049-b020-f5b65c762259">
<div class="modal__container" data-modal-close="modal-4b1636e6-7048-4049-b020-f5b65c762259">
<div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--4b1636e6-7048-4049-b020-f5b65c762259">
<header class="modal__header">
<h2 class="modal__title" id="modal__title--4b1636e6-7048-4049-b020-f5b65c762259">Default Modal</h2>
<button type="button" data-modal-close="modal-4b1636e6-7048-4049-b020-f5b65c762259" aria-label="Close Modal">×</button>
</header>
<div class="modal__content">
Nobis ut vel. Voluptas temporibus qui quo. Minus optio ipsa et corporis incidunt. Autem dolorem ab ducimus.
Error repellat esse ipsam a. Animi sit voluptates vitae. Omnis itaque ut aut rerum nulla. Est quas modi suscipit distinctio dolorum nam accusantium.
Quo minima possimus occaecati ut. Sit velit dolore at fugit nemo dicta earum perferendis cum. Quaerat repellendus eaque ut esse.
</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>