Nebulous Plasma Muffin

    glory-modal

    2.3.1 • Public • Published

    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)
    })

    Install

    npm i glory-modal

    DownloadsWeekly Downloads

    33

    Version

    2.3.1

    License

    MIT

    Unpacked Size

    66.8 kB

    Total Files

    15

    Last publish

    Collaborators

    • k-ivan