Class: Modal

Modal() → {Class}

A Modal class which can display programatically-generated content, or pull in content from an existing DOM node.

Constructor

Creates base DOM element.

Version:
  • 1.2.4
Author:
Source:
Returns:

The Modal instance

Type
Class
Example
const Modal = new Modal();

Members

(static) hash

Get current url hash

Source:

(static) instance

Gets the main Modal instance

Source:

(static) modal

Gets the modal DOM element

Source:

(static) modalContent

Gets the modal content DOM element

Source:

(static) onClose

Sets a callback to run when the modal closes

Source:

(static) onOpen

Sets a callback to run when the modal opens

Source:

Methods

(static) close() → {Class}

Closes modal, removes content and optional class, and shifts user focus back to triggering element, if specified.

Source:
Returns:

Modal instance.

Type
Class

(static) focusFirstElement()

Shifts focus to the very beginning of the modal element—just before the close button.

Source:

(static) open(content, optionalClass, focusOnCloseopt) → {Class}

Opens modal, adds content and optional CSS class

Parameters:
Name Type Attributes Description
content string | HTMLElement

String or DOMNode to be added as the modal content.

optionalClass string

Optional CSS class to add to the modal element.

focusOnClose HTMLElement <optional>

Element which will receive focus after the modal is closed. Typically, this will be the element which triggered the modal in the first place.

Source:
Returns:

Modal instance

Type
Class
Example
const triggerButton = document.querySelector('trigger');
const testContent = '<p>Some sample content!</p>';

triggerButton.addEventListener('click', () => {
  // Passing `this` as the third argument sets our trigger as the focused item once the Modal closes.
  Modal.open(testContent, 'test-modal-class', this);
});