Wtc-modal-view NPM

wtc-modal-view 3.4.0

A simple, unopinionated modal class.

src/wtc-modal-view.js

new Modal()

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

Examples

const myModal = new Modal();
const triggerButton = document.querySelector('trigger');

myModal.optionalClass = "modal--myModal";
myModal.content = '<p>Some sample content!</p>';
myModal.focusOnClose = triggerButton;

triggerButton.addEventListener('click', () => {
  myModal.open();
});

Returns

Void

Modal.close()

Closes modal.

If onCloseStartis defined that is called and waits for the callback. Otherwise it removes content and optional class, and shifts user focus back to triggering element, if specified.

Returns

Void

open()

Opens modal, adds content and optional CSS class

Returns

Void

focusFirstElement()

Shifts focus to the first element inside the content

Returns

Void

focusLastElement()

Shifts focus to the last element inside the content

Returns

Void

focusOnClose()

Gets the element that will be focused when the modal closes

Returns

HTMLElement

focusOnClose(element)

Sets the element that will be focused when the modal closes.
Setter. Usage: modalInstance.focusOnClose = myElement

Parameters

Name	Type	Description
element	`HTMLElement`	Must be a focusable element

Returns

Void

onOpen()

Gets the function that is called when the modal opens

Returns

Function

onOpen(callback)

Sets the function that is called when the modal opens. The function gets called with the modals DOM element. Setter. Usage: modalInstance.onOpen = (modalElement) => {}

Parameters

Name	Type	Description
callback	`Function`

Returns

Void

onClose()

Get the function that is called when the modal closes

Returns

Function

onClose(callback)

Sets the function that is called when the modal closes.
Setter. Usage: modalInstance.onClose = myFunction

Parameters

Name	Type	Description
callback	`Function`

Returns

Void

onCloseStart()

Get the function that is called just before the modal closes

Returns

Function

onCloseStart(callback)

Sets the function that is called just before the modal closes. If this is set, when modalInstance.close()` is called it will run the set function with a the modal DOM element and a callback. It will then wait for that callback to be run before completing the close function and calling onClose.

Setter. Usage: `modalInstance.onCloseStart = (modalElement, cb) => { // do some animation with modalElement cb();
}

modalInstance.close(); `