wtc-modal-view

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(); `

Parameters

Name	Type	Description
callback	Function

Returns

• Void

optionalClass(className)

Sets an optional class name on the modal for custom styling.
Setter. Usage: modalInstance.optionalClass = "modal--myclass"

Parameters

Name	Type	Description
className	String Array

Returns

• Void

optionalClass()

Gets the optional class name

Returns

• String Array optionalClass

closeButtonContent(content)

Sets the content of the close button, useful for localizing.
Setter. Usage: modalInstance.closeButtonContent = "<String of HTML!>"

Parameters

Name	Type	Description
content	string HTMLElement

Returns

• Void

content(content)

Sets the content of the modal.
Setter. Usage: modalInstance.content = MyHTMLElement

Parameters

Name	Type	Description
content	string HTMLElement

Returns

• Void

Documentation generated with doxdox.