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.