Simple vanilla JavaScript modal/popup plugin

Install

Download library files and add them to your project.

Link JS before end of body tag:

<script src="path/simple-modal.js"></script>

Link CSS in the head tag(optional):

<link rel="stylesheet" href="path/simple-modal.css">

Usage

Add markup

Modal must have id

<div class="modal" id="modal-default" aria-hidden="true">
  <div class="modal__wrapper">
    <div class="modal__inner">
      <div class="modal__content">
        <h1>Modal window</h1>
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt ipsum beatae laboriosam id natus! Similique dignissimos veritatis ducimu hic! Delectus, mollitia obcaecati dolor dolorum tempora nemo iusto id amet provident.
          </p>
          <button data-modal-close>Close</button>
      </div>
    </div>
  </div>
</div>

Add data attribute with id to your modal open trigger

data-modal-open="modal-default"

Add data attribute to your modal close trigger

data-modal-close

In this case it close current modal where there close trigger is, we also can pass a modal id value the same way as we do in data-modal-open

For example:

data-modal-close="modal-default"

Init plugin in your JavaScript code

Base init example:

const modals = new SimpleModal()
modals.init()

Init with all options example:

const options = {
  onInit: () => {
    console.log('init')
  },
  beforeOpen: modal => {
    console.log('before open: ', modal)
  },
  onOpen: modal => {
    console.log('on open: ', modal)
  },
  beforeClose: modal => {
    console.log('before close', modal)
  },
  onClose: modal => {
    console.log('on close', modal)
  },
  disableScroll: true,
  transition: 250,
  nested: true,
  overlayCloseAll: true,
}
const modals = new SimpleModal(options)
modals.init()

API

Methods

Open modal by id

SimpleModal.open(id)

Close modal by id

SimpleModal.close(id)

Close all active modals

SimpleModal.closeAll()

Events

onInit: fires when modals init

onInit: () => {
  console.log('init')
}

beforeOpen: fires before modal opened and transition start

beforeOpen: modal => {
  console.log('before open: ', modal)
}

onOpen: fires when modal opened and transition end

onOpen: modal => {
  console.log('on open: ', modal)
}

beforeClose: fires before modal closed and transition start

beforeClose: modal => {
  console.log('before close: ', modal)
}

onClose: fires when modal closed and transition end

onClose: modal => {
  console.log('on close: ', modal)
}

Options

disableScroll (boolean): Disable scroll when modal opened

disableScroll: true // default value

transition (number, ms): Open and close modal animation duration

transition: 250 // default value

nested (boolean): Enable nested modals

When modal is opened and we trigger another modal:

If nested = true, it will be opened over active modal.

If nested = false, it will be closed.

nested: false // default value

overlayCloseAll (boolean): should use if nested = true, on overlay click:

If overlayCloseAll = false, it will close only current active modal.

If overlayCloseAll = true, it will close all active modals.

overlayCloseAll: true // default value

Demo: https://nmasliy.github.io/simple-modal-js/