Constructor
new Modal() → {Class}
Creates base DOM element.
- Version:
- 1.2.4
- 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);
});