UI • Sidebar 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 necessary to be aware of how each of these techniques open the <dialog> 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/exit the modal. However a user can still use the Esc key to close the <dialog>.
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 <dialog> in any other scenario.
Ensure that developers know what happens when a required input is used inside a form, within the <dialog> element and how it affects closing it.
Whilst the <dialog> renders all other page elements inert, it does not stop page scrolling.

Basic Example

A basic sidebar modal using <dialog>.

Alignment

The sidebar <dialog> can aligned to the left or right of the viewport.

Body Elements

Add a header and/or footer area to the sidebar body.

<!-- Trigger -->
<button class="c-btn" type="button" onclick="window.modal_right_header.showModal()">Open Sidebar</button>

<!-- Modal -->
<dialog class="c-modal c-modal--sidebar c-modal--right" id="modal_right_header">
    <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 | o-flow">
            <p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</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" onclick="window.modal_right_header.close()">Cancel</button>
            </div>
        </div>
    </div>
</dialog>

<!-- Trigger -->
<button class="c-btn" type="button" onclick="window.modal_footer.showModal()">Open Sidebar</button>

<!-- Modal -->
<dialog class="c-modal c-modal--sidebar c-modal--right" id="modal_footer">    
    <div class="c-modal__body">
        <div class="c-modal__body-content | o-flow">
            <h2 class="u-heading u-gamma u-fw-500">Title</h2>
            <p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
        </div>
        <div class="c-modal__body-footer | u-space-x-xs">
            <button class="c-btn c-btn--primary">Confirm</button>
            <button class="c-btn c-btn--tertiary" type="button" onclick="window.modal_footer.close()">Cancel</button>
        </div>
    </div>
</dialog>

<!-- Trigger -->
<button class="c-btn" type="button" onclick="window.modal_all.showModal()">Open Sidebar</button>

<!-- Modal -->
<dialog class="c-modal c-modal--sidebar c-modal--right" id="modal_all">
    <div class="c-modal__body">
        <div class="c-modal__body-header">
            <h2 class="u-heading u-gamma u-fw-500">Title</h2>
        </div>
        <div class="c-modal__body-content | o-flow">
            <p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</p>
        </div>
        <div class="c-modal__body-footer | u-space-x-xs">
            <button class="c-btn c-btn--primary">Confirm</button>
            <button class="c-btn c-btn--tertiary" type="button" onclick="window.modal_all.close()">Cancel</button>
        </div>
    </div>
</dialog>

Close

Add a close button inside or outside the main "body".

<!-- Trigger -->
<button class="c-btn" type="button" onclick="window.modal_close_inside.showModal()">Open Sidebar</button>

<!-- Modal -->
<dialog class="c-modal c-modal--sidebar c-modal--right" id="modal_close_inside">    
    <div class="c-modal__body">
        <div class="c-modal__body-close">
            <button class="c-btn c-btn--clear" type="button" onclick="window.modal_close_inside.close()">
                <span class="u-hidden">Close Modal</span>
                <svg class="c-icon" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true">
                    <path fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="1.5" d="m4 4 8 8m-8 0 8-8"/>
                </svg>
            </button>
        </div>
        <div class="c-modal__body-content | o-flow">
            <h2 class="u-heading u-gamma u-fw-500">Title</h2>
            <p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</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" onclick="window.modal_close_inside.close()">Cancel</button>
            </div>
        </div>
    </div>
</dialog>

<!-- Trigger -->
<button class="c-btn" type="button" onclick="window.modal_close_outside.showModal()">Open Sidebar</button>

<!-- Modal -->
<dialog class="c-modal c-modal--sidebar c-modal--right" id="modal_close_outside">
    <div class="c-modal__close">
        <button class="c-btn c-btn--clear" type="button" onclick="window.modal_close_outside.close()">
            <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-content | o-flow">
            <h2 class="u-heading u-gamma u-fw-500">Title</h2>
            <p>Your negotiations seem to have failed, Ambassador. The negotiations never took place. It's urgent that we make contact with the republic. They've knocked out all our communications.</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" onclick="window.modal_close_outside.close()">Cancel</button>
            </div>
        </div>
    </div>
</dialog>

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