```
JavaScript:
```javascript
new OpenModalJs('modal')
```
## Details
Template
Include like in the example from /example/index.html
```html
ModalController
Content
```
Arguments
```javascript
new OpenModalJs(modalId, config, callback)
```
###`modalId` HTML id Attribute (required)
### `config` OpenModalJs configurations
| Property | Type | Default | Description |
|--------------------|-----------|-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
| `openOnInit` | `boolean` | `false` | _Make the modal open by default_ |
| `openClass` | `string` | `"open"` | _The css class that will be added and removed when opening closing modal_ |
| `overlayClass` | `string` | `"modal-overlay"` | _CSS class for the overlay which will close the modal on click by default. Set to empty string if you want to disable close on click_ |
| `closeButtonClass` | `string` | `"modal-close"` | _CSS class for the close buttons which will close the modal on click by default. Set to empty string if you want to disable close on click_ |
### `Callback`
Object of callbacks, which are fired when
- `callback.onOpening` - .open css class added ("transitionstart")
- `callback.onOpened` - opening css transition end or canceled ("transitionend" or "transitioncancel")
- `callback.onClosing` - .open css class removed ("transitionstart")
- `callback.onClosed` - closing css transition end ("transitionend" or "transitioncancel")
if the modal doesn't have css `transition-duration`both events will fire
`onOpening` with `onOpened` or
`onClosing` with `onClosed`
All props example:
```javascript
new OpenModalJs(
'some-id',
{
openOnInit: false,
openClass: "open",
overlayClass: "modal-overlay",
closeButtonClass: "modal-close",
},
{
onOpening: () => {},
onOpened: () => {},
onClosing: () => {},
onClosed: () => {},
}
)
```
Open/Close
```javascript
const modal = new OpenModalJs('some-element-id')
//Open the modal
modal.openModal()
//or
modal.isOpen = true
//Close modal
modal.closeModal()
//or
modal.isOpen = false
```
Events
**Listen for events**
```javascript
const handler = (event) => {
const modal = event.detail; //<- access the modal object
if(modal.modalId === 'some-element-id'){
//Do something
}
}
document.addEventListener('opening:modal', handler) // .open css class added ("transitionstart")
document.addEventListener('opened:modal', handler) // opening css transition end or canceled ("transitionend" or "transitioncancel")
document.addEventListener('closing:modal', handler) // .open css class removed ("transitionstart")
document.addEventListener('closed:modal', handler) // closing css transition end ("transitionend" or "transitioncancel")
```
if the modal doesn't have css `transition-duration`both events will fire
`opening:modal` with `opened:modal` or
`closing:modal` with `closed:modal`
## Dev env
Clone/download repo and install dependencies
```npm
npm i
```
### **Hot reload:**
```npm
npm run dev
```
### **Cypress:**
```npm
npm run cy:open
```
Cypress uses the dist folder,
you can reload build on change via:
```npm
npm run build:watch
```
---
_Source: https://npm.io/package/open-modal-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._