Pure-modal
A lightweight, accessible, vanilla JavaScript modal component.
Demo and documentation
https://romanslonov.github.io/pure-modal/
Basic usage
1. Add modal markup on your page and give it unique ID.
Modal title 1 Content of modal 1 Close Save changes
2. Init modal instance and pass unqiue ID of your modal.
const modal1 = 'modal1';modal1;
3. Add trigger to open the modal.
Modal 1
Done! 🎉
API
Options
Name | type | Default | Description |
---|---|---|---|
transition | Boolean | true | Initialize PureModal instance. Add event listeners. |
beforeOpen | Function | null | A callback that will be called before opening the modal. |
onOpen | Function | null | A callback that will be called after the modal is fully opened. |
beforeClose | Function | null | A callback that will be called before closing the modal. |
onClose | Function | null | A callback that will be called after the modal is fully closed. |
Methods
Name | Description |
---|---|
init() |
Initialize PureModal instance. Add event listeners. |
destroy() |
Destroy all event listeners. Useful when building SPA. |
open() |
Call to open modal manually. |
close() |
Call to close modal manually. |