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-8522c868-0d33-46e8-97cf-da3fa6d1d5fd">
<div class="modal__container" data-modal-close="modal-8522c868-0d33-46e8-97cf-da3fa6d1d5fd">
<div class="modal__item" role="dialog" aria-modal="true" aria-labelledby="modal__title--8522c868-0d33-46e8-97cf-da3fa6d1d5fd">
<header class="modal__header">
<h2 class="modal__title" id="modal__title--8522c868-0d33-46e8-97cf-da3fa6d1d5fd">Default Modal</h2>
<button type="button" data-modal-close="modal-8522c868-0d33-46e8-97cf-da3fa6d1d5fd" aria-label="Close Modal">×</button>
</header>
<div class="modal__content">
Unde rem reprehenderit cupiditate laboriosam distinctio. Saepe nisi veritatis repellat assumenda non. Eveniet quis omnis similique sit nihil doloremque ex possimus. Earum quos vel.
Tempore qui veritatis aliquid atque nobis. Mollitia minima et explicabo voluptates. Eum sint qui maxime voluptatem. Et quia commodi neque amet qui nesciunt laboriosam est. Sed eveniet provident perspiciatis sed totam animi est.
Fuga ipsam in voluptates nostrum excepturi aut magnam esse. Iusto vel nemo magni rerum quis esse quia commodi. Reprehenderit sequi libero placeat. Quae consequatur qui alias sed. Distinctio ut minus sunt. Quia sed quis voluptate sed quis sint dicta.
</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>