Modal

Simple modal dialogs.

The trigger must be a link to the id of the element holding the modal content (<a href="#modal-content">). The element's content is moved into the dialog while it's open and returned when it closes. Escape, the close button, or a click outside the content closes the modal.

Demos
Options
Methods
Events
Styles

Demos

Basic

Basic

Link to an element's id to show its content in a modal dialog. The first heading names the dialog for assistive technologies, and buttons with the fs-modal-trigger-close class close it.

<a href="#modal-content" class="demo_button js-modal">Open Modal</a>

<div class="demo_hidden" id="modal-content">
  <div class="demo_content">
    <h2>Adipiscing Vulputate Elit</h2>
    <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum.</p>
    <button type="button" class="demo_button fs-modal-trigger-close">Close</button>
  </div>
</div>

import { Modal, Utils } from 'formstone';

Utils.ready(() =&gt; {
  Modal.construct('.js-modal');
});

body {
  padding: 5vh 5vw;
}

.demo_button {
  background: var(--color-yellow);
  border: var(--border-size) solid var(--color-black);
  border-radius: var(--border-size);
  color: var(--color-black);
  cursor: pointer;
  display: inline-block;
  font: inherit;
  padding: 10px 20px;
  text-decoration: none;
}

.demo_hidden {
  display: none;
}

.demo_content {
  max-width: 500px;
  padding: 10px;
}

Options

Set instance options by passing a valid object at initialization, or to the public .defaults() method. Custom options for a specific instance can also be set by attaching a data-modal-options attribute containing a properly formatted JSON object to the target element.

Name	Type	Default	Description
`customClass`	`string`	`''`	Custom CSS class for modal dialog
`label`	`string`	`null`	Accessible name for the dialog; when not set, the first heading in the content is used, then `'Dialog'`
`returnFocus`	`boolean`	`true`	Return focus to trigger after closing
`templates`	`object`	`...`	HTML templates for modal components

Methods

Methods are publicly available to all active instances, unless otherwise stated.

Name	Description
`.close()`	Closes active modal instance
`.construct()`	Initializes Modal on target elements
`.defaults()`	Sets default options for future Modal instances
`.destroy()`	Removes instance and all related data
`.open()`	Opens modal instance

.close()

Closes active modal instance.

Returns

Type	Description
`Promise`	Promise that resolves when the close transition completes; resolves immediately if the modal isn't open

Examples

el.Modal.close();

.construct()

Initializes Modal on target elements.

Parameters

Name	Type	Default	Description
`selector`	`string` (required)	`''`	Selector string to target
`options`	`object` (optional)	`{}`	Object containing instance options

Returns

Type	Description
`NodeList`	NodeList of target elements

Examples

let targets = Modal.construct('.js-modal');

let targets = Modal.construct('.js-modal', {
  customClass: 'custom-modal'
});

.defaults()

Sets default options for future Modal instances.

Parameters

Name	Type	Default	Description
`options`	`object` (required)	`{}`	Object containing default options

Examples

Modal.defaults({
  customClass: 'my-modal',
  returnFocus: false
});

.destroy()

Removes instance and all related data.

Examples

el.Modal.destroy();

.open()

Opens instance.

Examples

el.Modal.open();

Events

Events are triggered on the trigger element and on the window object.

Name	Description
`modal:open`	Modal opened; `detail.el` is the trigger element
`modal:close`	Modal closed; `detail.el` is the trigger element

Commands

Dispatch modal:close on the window object to close the open modal, for example from custom controls.

Utils.trigger(window, 'modal:close');

modal:close is both a command and the notification fired once the modal has closed, so a modal:close listener also runs when a close is requested. Only the notification has detail.el.

Elements inside the modal content with the class fs-modal-trigger-close close the modal when clicked.

Styles

CSS custom properties are used to modify default styles.

Property	Default	Description
`--fs-modal-duration`	`0.25s`	Modal transition duration
`--fs-modal-timing`	`linear`	Modal transition timing
`--fs-modal-overlay-bg`	`rgba(0, 0, 0, 0.9)`	Overlay background color
`--fs-modal-container-bg`	`#fff`	Content container background
`--fs-modal-button-background`	`#fff`	Close button background
`--fs-modal-button-color`	`#000`	Close button icon color

Classes allow deeper customization and indicate the current state of a specific instance.

Classname	Type	Description
`.fs-modal`	`element`	Modal element
`.fs-modal-container`	`element`	Content container element
`.fs-modal-wrap`	`element`	Content wrapper element
`.fs-modal-frame`	`element`	Content frame element
`.fs-modal-close`	`element`	Close button element
`.fs-modal-open`	`modifier`	Indicates open state

The page behind an open modal doesn't scroll (html:has(.fs-modal[open])).