Glory-modal

Modal dialog plugin with multimodals support inspired by Bootstrap modal dialogs and written in pure JavaScript.

Demo

Demo

Installation

NPM

npm i glory-modal

or CDN (do not forget to replace {version} with the current version)

https://unpkg.com/glory-modal@latest/dist/gmodal.css
https://unpkg.com/glory-modal@latest/dist/gmodal.js

or basic download

Use

Include the plugin styles

<link rel="stylesheet" href="gmodal.css">

Or If you use SASS, you can import a sass source

@import './node_modules/glory-modal/src/scss/gmodal.scss';

We will need a modal window markup

<div class="gmodal" id="exampleModal" role="dialog" aria-labelledby="Modal">
  <div class="gmodal__container">
    <div class="gmodal__dialog">
      <div class="gmodal__header">
        <div class="gmodal__title">Modal</div>
        <button type="button" class="gmodal__close" data-gmodal="dismiss">
            <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6.34 6.34l11.32 11.32m-11.32 0L17.66 6.34"/>
          </svg>
        </button>
      </div>
      <div class="gmodal__body">
        Some content
      </div>
      <div class="gmodal__footer">
        <button data-gmodal="dismiss">Close</button>
      </div>
    </div>
  </div>
</div>

Add the plugin to the page

<script src="gmodal.js"></script>

or if you are using a module bundler

import Gmodal from 'glory-modal';

Init plugin

var modal = new Gmodal('#exampleModal');

Options

But we can also use advanced plugin options. Available options and their default values.

new Gmodal(elem, {
  stickySelectors: [],
  animation: true,
  backdrop: true,
  closeBackdrop: true,
  keyboard: true
});

elem (string | HTMLElement) selector or element

stickySelectors (array of strings) array with selectors (fixed elements will also be margin-right)

animation (bool) modal animation

backdrop (bool) add backdrop

closeBackdrop (bool) close by clicking on the backdrop, only if the backdrop: true

keyboard (bool) Keyboard events

Public methods

Public methods for working with the plugin

.open()

This method open modal dialog

.close()

This method close modal dialog.

.destroy()

This method stops the plugin. To reinitialize, you need to call the constructor again.

Static properties and methods

Gmodal.closeAll()

Method will be useful when several modals are open and you need to close all at once

Gmodal.modals

Array with data about open modals

Events

Plugin provides an event for open|close modal

var elem = document.querySelector('#modal');
var modal = new Gmodal(elem);

elem.addEventListener('gmodal:beforeopen', function(evt) {
  console.log(evt)
})
elem.addEventListener('gmodal:open', function(evt) {
  console.log(evt)
})
elem.addEventListener('gmodal:beforeclose', function(evt) {
  console.log(evt)
})
elem.addEventListener('gmodal:close', function(evt) {
  console.log(evt)
})