Modal

Simple modal dialogs.

Demos
Options
Methods
Events
Styles

Demos

Basic

Basic

Open an element in a modal.

<!-- Demo coming soon -->

import { Modal, Utils } from 'Formstone';

Utils.ready(() =&gt; {
  // Demo coming soon
});

/* Demo coming soon */

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
`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 plugin on target elements
`.defaults()`	Sets default options for future Modal instances
`.destroy()`	Removes plugin and all related data
`.open()`	Opens modal instance

.close()

Closes active modal instance.

Returns

Type	Description
`Promise`	Promise that resolves when close transition completes

Examples

el.Modal.close();

.construct()

Initializes Modal plugin 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 plugin and all related data.

Examples

el.Modal.destroy();

.open()

Opens instance.

Examples

el.Modal.open();

Events

Events are triggered on the window object.

Name	Description
`modal:open`	Modal opened
`modal:close`	Modal closed

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