Commentary

Modal is a classic overlay. Any type of content can be included in the body; the footer is typically reserved for call-to-action buttons.

The recommended pattern is the native <dialog> element with the .modal-card class, opened via showModal() and closed via close(). The browser provides focus trap, ESC-to-close, top-layer stacking, and ::backdrop for free. The .modal-overlay:target pattern is retained as a CSS-only fallback.

There are three containers inside .modal-card; these can be ordered any way you like.

  • modal-card > header contains a title and an optional sub-title text;
  • modal-card > div is a basic container that contains HTML elements, Goldilocks-CSS elements or components;
  • modal-card > footer is a flexbox controlled container that would typically contain call-to-action elements.

Usage

Classes:
dialog.modal-card Recommended. Native <dialog> with card styling; resets browser defaults and styles ::backdrop.
.modal-overlay, .modal-overlay:target, .modal Legacy CSS-only fallback triggered by anchor link. Prefer <dialog> for new work.
.modal-card Holds modal content.
.modal-card > header Provides a container and background for title.
.modal-card > header > hx Sets font and weight for title text.
.delete Close control in the header (top-right). Use on a <button type="button"> with aria-label="Close".
.modal-card > div Standard container for HTML content.
.modal-card > footer Optional flexbox typically for calls to action buttons or links.
Dependencies:
File: modal.css
Variables: --bg-main, --bg-component, --border-main-darker, --mar-horz, --pad-horz, --pad-vert, --radius-comp, --size-4, --text-darker
Layer: extended

Examples

Basic Modal Form

Modal title

Content

Content

 

                <button type="button" id="modal-opener" class="button button-primary-outlined"
                        onclick="document.getElementById('modal-one').showModal()">Open Modal</button>

                <dialog id="modal-one" class="modal-card" aria-labelledby="modal-one-title">
                    <header>
                        <h2 id="modal-one-title">Modal title</h2>
                        <button type="button" class="delete" aria-label="Close"
                                onclick="document.getElementById('modal-one').close()"></button>
                    </header>

                    <div>
                        <p>Content</p>
                    </div>

                    <footer>
                        <button type="button" class="button-primary">Save Changes</button>
                        <button type="button" class="button button-secondary-outlined"
                                onclick="document.getElementById('modal-one').close()">Cancel Action</button>
                    </footer>
                </dialog>