Uses Micromodal.js.
Each modal should have a unique id attribute and the relevant references updated.
<div class="modal modal--small" aria-hidden="true" id="modal-1fea6d43-4c21-4314-babf-d18792ed0ba3">
<div class="modal__container" data-modal-close="modal-1fea6d43-4c21-4314-babf-d18792ed0ba3">
<div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--1fea6d43-4c21-4314-babf-d18792ed0ba3">
<header class="modal__header">
<h2 class="modal__title" id="modal__title--1fea6d43-4c21-4314-babf-d18792ed0ba3">Default Modal</h2>
<button type="button" data-modal-close="modal-1fea6d43-4c21-4314-babf-d18792ed0ba3" aria-label="Close Modal">×</button>
</header>
<div class="modal__content">
Voluptate ut et expedita deleniti facilis. Quo ut facere sed veritatis esse accusamus et. Enim commodi dolores distinctio dolores voluptas placeat. Ea harum nulla occaecati voluptates voluptas alias ad.
Hic consequatur eius eligendi. Sit tempore vitae optio sunt alias sit adipisci. Id ut officiis qui facilis placeat vitae ut voluptatibus.
Fuga laboriosam facilis esse ab accusamus quam odio. Consequuntur possimus sed magnam quis. Eum at ut quia in. In est consequuntur dignissimos. Consequatur accusantium consequatur nisi iure dicta eos suscipit sint odio.
</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>