Commentary

Modal is a classic overlay. Note that any type of content can be included in the body. The footer is typically reserved for call-to-action buttons or links.

There are three containers in the modal. 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:
.modal-overlay Container for a modal that is triggered by anchor link; has background control for modal.
.modal-overlay:target CSS watcher for trigger
.modal Defines main container for centering displayable modal content.
.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 Common delete anchor link to close modal. Appears in header right top.
.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-main-ter, --border-main-darker, --mar-horz, --pad-horz, --pad-vert, --radius-comp, --size-4, --text-darker

Examples

Open Modal

Basic Modal Form

Modal title

Content


                <button type="button" id="modal-opener" class="is-primary has-hover">
                    <a href="#modal-one">Open Modal</a>
                </button>

                <div id="modal-one" class="modal-overlay">
                    <div class="modal">
                        <article class="modal-card">
                            <header>
                                <h2>Modal title</h2>
                                <a class="delete" href="#modal-opener" aria-label="delete"></a>
                            </header>

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

                            <footer>
                                <button class="is-primary has-hover">Save Changes</button>
                                <a href="#modal-opener" class="button is-danger-outlined has-hover">Cancel Action</a>
                            </footer>
                        </article>
                    </div>
                </div>