Home

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.