open-modal-js
v0.5.0
Published
Vanilla JS modal/popup
Downloads
12
Maintainers
Readme
JSModal
Description
Vanilla JS modal, that simply adds a .open
class to show the modal.
Quick start
Download source files
- css from assets/css/default-modal-styles.css (feel free to use your own style)
- js from dist/open-modal-js.umd.js
HTML:
<div id="modal" class="modal">
<div class="modal-overlay"></div>
<div class="modal-card">
<div class="modal-body">
<div class="modal-content">Content</div>
<div class="modal-footer">
<button class="modal-close">Close</button>
</div>
</div>
</div>
</div>
JavaScript:
new OpenModalJs('modal')
Details
Include like in the example from /example/index.html
<link rel="stylesheet" href="default-modal-styles.css">
<script src="open-modal-js.umd.js"></script>
<script> const modal = new OpenModalJs('modal', true) </script>
<button onclick="modal.openModal()">Open modal</button>
<div id="modal" class="modal">
<div class="modal-overlay"></div>
<div class="modal-card">
<div class="modal-body">
<div class="modal-header">ModalController</div>
<div class="modal-content">Content</div>
<div class="modal-footer">
<button class="modal-close">Close</button>
</div>
</div>
</div>
</div>
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 fireonOpening
with onOpened
oronClosing
with onClosed
All props example:
new OpenModalJs(
'some-id',
{
openOnInit: false,
openClass: "open",
overlayClass: "modal-overlay",
closeButtonClass: "modal-close",
},
{
onOpening: () => {},
onOpened: () => {},
onClosing: () => {},
onClosed: () => {},
}
)
const modal = new OpenModalJs('some-element-id')
//Open the modal
modal.openModal()
//or
modal.isOpen = true
//Close modal
modal.closeModal()
//or
modal.isOpen = false
Listen for events
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 fireopening:modal
with opened:modal
orclosing:modal
with closed:modal
Dev env
Clone/download repo and install dependencies
npm i
Hot reload:
npm run dev
Cypress:
npm run cy:open
Cypress uses the dist folder, you can reload build on change via:
npm run build:watch