@chaucerbao/modal.js
v0.1.1Modal.js ·
A simple, tiny modal.
Usage
Structure your modal similar to the HTML example below. There are 4 attributes that Modal.js recognizes:
data-modal
- The modal container
data-modal-dialog
- The dialog box that houses the modal's content
data-modal-trigger
- Add it to any element(s) to attach a click-handler for opening a modal with the given ID
data-modal-close
- (Optional) Add it to any element(s) to attach a click-handler for closing the modal
<!-- HTML -->
<button data-modal-trigger="modal-id">Open a modal</button>
<div id="modal-id" data-modal>
<div data-modal-dialog>
<h1>Amazing title</h1>
<p>Very intriguing content.</p>
<button data-modal-close>Close Modal</button>
</div>
</div>
Initialize your modal(s) with customizable options for each modal.
/* JavaScript */
const modalHandler = modal({
/* Options for all modals */
'*': {
onOpen: () => console.log('onOpen *'),
onClose: () => console.log('onClose *')
},
/* Options specifically for the modal with the ID of 'modal-id' */
'modal-id': {
onOpen: (modal) => console.log('Modal opened', modal),
onClose: (modal) => console.log('Modal closed', modal)
}
})
You can also open/close modals programmatically after initialization.
/* JavaScript */
document
.getElementById('opener')
.addEventListener('click', () => modalHandler.open('modal-id'))
document
.getElementById('closer')
.addEventListener('click', () => modalHandler.close())
Now, style your modal (example) with CSS.
Options
Available options for modal(options)
where options
are defined for each modal by its ID.
Option | Type | Description |
---|---|---|
onOpen | function | A callback function to run when a modal is opened |
onClose | function | A callback function to run when a modal is closed |
npm i @chaucerbao/modal.js
Metadata
- ISC
- Whatever
- Alvin Chan
- released 11/21/2018