<button type="button" class="Button focus" data-a11y-dialog-show="your-dialog-id">
<span>Launch Modal</span>
</button>
<!-- 1. The dialog container -->
<div id="your-dialog-id" data-a11y-dialog="your-dialog-id" aria-labelledby="your-dialog-title-id" aria-hidden="true" class="Dialog">
<!-- 2. The dialog overlay -->
<div data-a11y-dialog-hide class="Dialog__overlay"></div>
<!-- 3. The actual dialog -->
<div role="document" class="Dialog__content">
<!-- 4. The close button -->
<button type="button" data-a11y-dialog-hide aria-label="Close dialog">
×
</button>
<!-- 5. The dialog title -->
<h1 id="your-dialog-title-id">
A title has to be included for a11y. It's currently hidden
</h1>
<!-- 6. Dialog content -->
This is some content with a <a href="">link</a>. It will trap focus
</div>
</div>
<button type="button"
class="Button focus"
data-a11y-dialog-show="your-dialog-id">
<span>Launch Modal</span>
</button>
<!-- 1. The dialog container -->
<div id="your-dialog-id"
data-a11y-dialog="your-dialog-id"
aria-labelledby="your-dialog-title-id"
aria-hidden="true"
class="Dialog">
<!-- 2. The dialog overlay -->
<div data-a11y-dialog-hide class="Dialog__overlay"></div>
<!-- 3. The actual dialog -->
<div role="document" class="Dialog__content">
<!-- 4. The close button -->
<button type="button" data-a11y-dialog-hide aria-label="Close dialog">
×
</button>
<!-- 5. The dialog title -->
<h1 id="your-dialog-title-id">
{{ title }}
</h1>
<!-- 6. Dialog content -->
{{ content }}
</div>
</div>
{
"title": "A title has to be included for a11y. It's currently hidden",
"content": "This is some content with a <a href=\"\">link</a>. It will trap focus"
}
/**
* 1. Make the dialog container, and its child overlay spread across
* the entire window.
*/
.Dialog,
.Dialog__overlay {
position: fixed; /* 1 */
top: 0; /* 1 */
right: 0; /* 1 */
bottom: 0; /* 1 */
left: 0; /* 1 */
}
/**
* 1. Make sure the dialog container and all its descendants sits on
* top of the rest of the page.
* 2. Make the dialog container a flex container to easily center the
* dialog.
*/
.Dialog {
z-index: 2; /* 1 */
display: flex; /* 2 */
}
/**
* 1. Make sure the dialog container and all its descendants are not
* visible and not focusable when it is hidden.
*/
.Dialog[aria-hidden='true'] {
display: none; /* 1 */
}
/**
* 1. Make the overlay look like an overlay.
*/
.Dialog__overlay {
background-color: rgba(43, 46, 56, 0.9); /* 1 */
}
/**
* 1. Vertically and horizontally center the dialog in the page.
* 2. Make sure the dialog sits on top of the overlay.
* 3. Make sure the dialog has an opaque background.
*/
.Dialog__content {
margin: auto; /* 1 */
z-index: 2; /* 2 */
position: relative; /* 2 */
background-color: white; /* 3 */
}