# wtc-modal-view

> A simple, unopinionated modal class.

Latest version **3.4.0** (published 2022-02-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install wtc-modal-view
pnpm add wtc-modal-view
yarn add wtc-modal-view
bun add wtc-modal-view
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.4.0 |
| Published | 2022-02-07 |
| First published | 2016-11-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Marlon Marcello |
| Maintainers | wethecollective, andrewrubin |
| Keywords | wtc |

## Links

- npm: https://www.npmjs.com/package/wtc-modal-view
- Repository: https://github.com/wethegit/wtc-modal-view
- Homepage: https://github.com/wethegit/wtc-modal-view#readme
- Issues: https://github.com/wethegit/wtc-modal-view/issues
- npm.io page: https://npm.io/package/wtc-modal-view

## Recent versions

- 3.4.0 (latest) — 2022-02-07
- 3.3.0 — 2021-04-21
- 3.2.0 — 2021-04-21
- 3.1.0 — 2021-04-21
- 3.0.0 — 2020-05-29
- 2.0.1 — 2020-05-26
- 2.0.0 — 2020-02-28
- 1.2.5 — 2020-01-11
- 1.2.4 — 2019-06-19
- 1.2.3 — 2019-06-19
- 1.2.2 — 2019-06-19
- 1.2.1 — 2019-06-19
- 1.2.0 — 2019-06-19
- 1.1.9 — 2019-06-19
- 1.1.8 — 2019-05-14
- … 14 more at https://npm.io/package/wtc-modal-view/versions

## README

# [wtc-modal-view](https://github.com/wethegit/wtc-modal-view#readme) *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

```javascript
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 `onCloseStart`is 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 | &nbsp; |




##### 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`  |  | &nbsp; |




##### 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`  |  | &nbsp; |




##### 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`  |  | &nbsp; |




##### 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`  |  | &nbsp; |




##### 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`  |  | &nbsp; |




##### Returns


- `Void`



#### content(content) 

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




##### Parameters

| Name | Type | Description |  |
| ---- | ---- | ----------- | -------- |
| content | `string` `HTMLElement`  |  | &nbsp; |




##### Returns


- `Void`




*Documentation generated with [doxdox](https://github.com/neogeek/doxdox).*

---
_Source: https://npm.io/package/wtc-modal-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._