Modal

When to use it

The Modal component is primarily a JavaScript component in this UI library, meaning it doesn't require any extra CSS for you as a developer. Just add the data-modal attribute to a link and its destination will be shown in a modal.

Under the hood it uses the native <dialog> element together with the c-dialog styles. That means the Modal component is best suited when you want a simple trigger-driven API for inline content or embeddable external URLs, while Dialog is the lower-level option when you want to author the dialog markup yourself.

When using the Modal for inline content (i.e. an element already on the same page), you should hide that content by default, for example using u-hidden. The target element is moved into a generated dialog while open and restored to its original place when closed.

TIP

data-lity-close is still supported for backwards compatibility, but prefer data-modal-close for new code.

TIP

External URLs are rendered in an <iframe>, so the destination must allow embedding.

TIP

YouTube links are automatically converted to embed URLs and opened with autoplay and mute enabled.

What it looks like

Code examples

External page

<a data-modal href="https://www.tickster.com/">Tickster.com</a>
(opens in a modal box).

Inline content

<a data-modal href="#inline-modal-example">Show on-page content</a>
<div class="u-hidden" id="inline-modal-example">
    <div class="c-card">
        <div class="c-card__body">
            <p>Hidden content lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="c-card__foot">
            <button class="c-button" data-modal-close>Close</button>
        </div>
    </div>
</div>

Accessibility notes

Since adding JavaScript to control what a user can and cannot do on a page is tricky, there is always some accessibility risk with trigger-driven modals. If you need full control over semantics, labelling and actions, prefer Dialog and author the dialog markup directly. Also note that embedded external pages inherit the accessibility constraints of their iframe content.