open-modal-js v0.5.0

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

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

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