open-modal-js

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

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-durationboth events will fire
onOpening with onOpened or
onClosing 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-durationboth events will fire
opening:modal with opened:modal or
closing:modal with closed:modal