wtc-modal-view 3.4.0

> A simple, unopinionated modal class.

$3

#### new Modal()

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

##### Examples

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

myModal.optionalClass = "modal--myModal";
myModal.content = '

Some sample content!

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 = ""

##### 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.