UI • Box Modal

Notes:

A few things to note when using the <dialog> element.

window.#id.showModal()should be used to open the <dialog>. window.#id.open() can be used, however this comes with reduced accessibility and functionality. It's good to be aware of what each of these techniques to open the <dialog> does and to factor in any additional development for loss of functionality.
Using the <dialog> element, means there is no 'click outside' (or the backdrop) to close the modal. However a user can still use the Esc key to close the <dialog>. Updated! Using dialog.js module to invoke the dialog now allows us to add "light dismiss" to dialog elements.
The <dialog> element has an autofocus feature, which focuses the first selectable element when opening the modal. If content is scrollable and the first selectable element is at the bottom of the content it will focus and auto scroll to the bottom. This won't be desirable behaviour for this context, so have a plan to manage this. A good way to do it, is to autofocus a close button at the top so that when the modal opens, it does not automatically scroll to the bottom.
Close the <dialog> element by submitting a form within the dialog (for pages that are not surrounded by a master form element), with <button formmethod="dialog">Cancel</button>. Use onclick="window.#id.close()" to close the element when not using a form inside the <dialog>.
Ensure that developers know what happens when a required input is used and how it affects closing the <dialog> element.
Whilst the <dialog> renders all other page elements inert, it does not stop page scrolling. Updated! This is circumvented by using CSS on the HTML when a <dialog> element is open.

Dialog Element

Using the HTML <dialog> element for modals.

Box Sizes

A typical "boxed" modal, sizes can be adjusted with class modifiers.

Body Elements

Layout options for the box modal include a header and footer useful for occasions when content within the modal is scrollable.

<button class="c-btn" data-dialog-open data-target="#dialog_header">Open Dialog</button>

<dialog class="c-modal c-modal--box" id="dialog_header" data-dialog>
    <div class="c-modal__body">
        <div class="c-modal__body-header | o-flow">
            <h2 class="u-heading u-gamma u-fw-500">Modal Header</h2>
        </div>
        <div class="c-modal__body-content | o-flow">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda deleniti aspernatur eveniet illum aut, cumque delectus nobis, perspiciatis aliquam quibusdam est nam, cum vitae ut. Libero suscipit deserunt in reiciendis!</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus quaerat exercitationem numquam saepe nulla debitis aspernatur, repellat aliquam. Harum dolorum distinctio quo dolore aperiam perspiciatis non aliquid adipisci impedit accusamus.</p>
            <div class="u-space-x-xs">
                <button class="c-btn c-btn--primary">Confirm</button>
                <button class="c-btn c-btn--tertiary" type="button" data-dialog-close data-target="#dialog_header">Cancel</button>
            </div>
        </div>
    </div>
</dialog>

<button class="c-btn" data-dialog-open data-target="#dialog_footer">Open Dialog</button>

<dialog class="c-modal c-modal--box" id="dialog_footer" data-dialog>
    <div class="c-modal__body">
        <div class="c-modal__body-content | o-flow">
            <h2 class="u-heading u-gamma u-fw-500">Modal Title</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quae aut iste, amet debitis totam sequi eveniet cum sapiente, placeat repudiandae, quisquam esse unde. Aliquid error atque culpa molestias sapiente exercitationem!</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cupiditate doloribus quis reprehenderit! Quaerat minima facere similique quidem enim eos voluptatibus distinctio reprehenderit, alias eius molestias animi consectetur exercitationem velit iste.</p>
        </div>
        <div class="c-modal__body-footer | o-flow">
            <span class="o-split">
                <b class="o-split__title">Modal Footer</b>
                <button class="c-btn" type="button" data-dialog-close data-target="#dialog_footer">Close</button>
            </span>
        </div>
    </div>
</dialog>

<button class="c-btn" data-dialog-open data-target="#dialog_all">Open Dialog</button>

<dialog class="c-modal c-modal--box" id="dialog_all" data-dialog>
    <div class="c-modal__close">
        <button class="c-btn c-btn--clear c-modal__exit" type="button" data-dialog-close data-target="#dialog_all">
            <span class="u-hidden">Close Dialog</span>
            <svg class="c-icon c-icon--lg" viewbox="0 0 24 24" width="16" height="16" aria-hidden="true">
                <path fill="none" stroke-linecap="round" stroke-width="2" d="m6 6 12 12M6 18 18 6"/>
            </svg>
        </button>
    </div>
    <div class="c-modal__body">
        <div class="c-modal__body-header | o-flow">
            <h2 class="u-heading u-gamma u-fw-500">Modal Header</h2>
        </div>
        <div class="c-modal__body-content | o-flow">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quaerat quidem veniam cum alias incidunt, dolorum error iure amet. Quisquam praesentium fuga omnis voluptatibus sint iusto neque dolores quaerat nobis.</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, nulla sit, totam itaque omnis hic sint, possimus alias inventore ratione aspernatur praesentium enim perspiciatis. Eum beatae officia quo perspiciatis at.</p>
        </div>
        <div class="c-modal__body-footer | o-flow">
            <div class="o-split">
                <b class="o-split__title">Modal Footer</b>
                <div class="u-space-x-xs">
                    <button class="c-btn c-btn--primary" type="button">Confirm</button>
                    <button class="c-btn c-btn--tertiary" type="button" data-dialog-close data-target="#dialog_all">Close</button>
                </div>
            </div>
        </div>
    </div>
</dialog>

Managing Overflow

When space is limited i.e when on a mobile device, ensure the content is scroll-able within the modal.

<button class="c-btn" data-dialog-open data-target="#dialog_scroll">Open Dialog</button>

<dialog class="c-modal c-modal--box" id="dialog_scroll" data-dialog>
    <div class="c-modal__body">
        <div class="c-modal__body-content | u-h-20 | o-flow">
            <h2 class="u-heading u-gamma u-fw-500">Title</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, ullam. Natus assumenda sint dicta! Quos eveniet voluptatem vel, consectetur hic ullam error accusantium, quod necessitatibus fugit ducimus quae nemo quisquam!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quos harum excepturi iste, dolore adipisci aliquid soluta? Quisquam, quidem commodi? Molestias, ab. Iure, autem quae eligendi veniam saepe assumenda cupiditate?</p>
            
            <div class="u-space-x-xs">
                <button class="c-btn c-btn--primary" type="button">Confirm</button>
                <button class="c-btn c-btn--tertiary" type="button" data-dialog-close data-target="#dialog_scroll">Close</button>
            </div>
        </div>
    </div>
</dialog>

<button class="c-btn" data-dialog-open data-target="#dialog_scroll_header">Open Dialog</button>

<dialog class="c-modal c-modal--box" id="dialog_scroll_header" data-dialog>
    <div class="c-modal__body">
        <div class="c-modal__body-header | o-flow">
            <h2 class="u-heading u-gamma u-fw-500">Title</h2>
        </div>
        <div class="c-modal__body-content | u-h-20 | o-flow">
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, ullam. Natus assumenda sint dicta! Quos eveniet voluptatem vel, consectetur hic ullam error accusantium, quod necessitatibus fugit ducimus quae nemo quisquam!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quos harum excepturi iste, dolore adipisci aliquid soluta? Quisquam, quidem commodi? Molestias, ab. Iure, autem quae eligendi veniam saepe assumenda cupiditate?</p>
            <div class="u-space-x-xs">
                <button class="c-btn c-btn--primary" type="button">Confirm</button>
                <button class="c-btn c-btn--tertiary" type="button" data-dialog-close data-target="#dialog_scroll_header">Close</button>
            </div>
        </div>
    </div>
</dialog>

<button class="c-btn" data-dialog-open data-target="#dialog_scroll_footer">Open Dialog</button>

<dialog class="c-modal c-modal--box" id="dialog_scroll_footer" data-dialog>
    <div class="c-modal__body">
        <div class="c-modal__body-content | u-h-20 | o-flow">
            <h2 class="u-heading u-gamma u-fw-500">Title</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequuntur, ullam. Natus assumenda sint dicta! Quos eveniet voluptatem vel, consectetur hic ullam error accusantium, quod necessitatibus fugit ducimus quae nemo quisquam!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis quos harum excepturi iste, dolore adipisci aliquid soluta? Quisquam, quidem commodi? Molestias, ab. Iure, autem quae eligendi veniam saepe assumenda cupiditate?</p>
        </div>
        <div class="c-modal__body-footer | o-flow">
            <div class="o-split">
                <b class="o-split__title">Modal Footer</b>

                <div class="u-space-x-xs">
                    <button class="c-btn c-btn--primary" type="button">Confirm</button>
                    <button class="c-btn c-btn--tertiary" type="button" data-dialog-close data-target="#dialog_scroll_footer">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</dialog>

<button class="c-btn" data-dialog-open data-target="#dialog_scroll_all">Open Dialog</button>

<dialog class="c-modal c-modal--box" id="dialog_scroll_all" data-dialog>
    <div class="c-modal__body">
        <div class="c-modal__body-header | o-flow">
            <h2 class="u-heading u-gamma u-fw-500">Title</h2>
        </div>
        <div class="c-modal__body-content | u-h-20 | o-flow">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod eum accusantium commodi ullam! Architecto, excepturi blanditiis minima maxime, asperiores modi doloribus repellat consequuntur sunt earum nihil culpa omnis vero tempore?</p>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod quaerat nam ipsa reiciendis sint, provident maxime ducimus error laudantium odit qui necessitatibus, facere quisquam, aliquam veritatis asperiores dignissimos similique illo?</p>
        </div>
        <div class="c-modal__body-footer | o-flow">
            <div class="o-split">
                <b class="o-split__title">Modal Footer</b>
                <div class="u-space-x-xs">
                    <button class="c-btn c-btn--primary" type="button">Confirm</button>
                    <button class="c-btn c-btn--tertiary" type="button" data-dialog-close data-target="#dialog_scroll_all">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</dialog>

Close

Allow the dialog element to be closed with a "X" button.

Useful notes and reading:

Related Components:

Useful Links:

Support:

Support for the dialog element.

Data on support for the dialog feature across the major browsers from caniuse.com