Modal-handler NPM

modal-handler

Allow modals to be added anywhere on the page
Handle z-index for multiple modals
Trap the focus inside the modal
Restore the focus to the active element when modal is closed
Allow the esc key to close the active modal
CommonJS module

Get Started

CommonJS

$ npm install modal-handler

var MODAL = require('modal-handler');

Browser Global

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="TheC2Group/event-handler.js"></script>
<script src="iife/modal-handler.js"></script>

MODAL

MODAL.config()

param {Object} overwrite MODAL options

MODAL.setDefaults()

param {Object} overwrite modal defaults

MODAL.create()

param {jQuery} element or selector
param {Object} options
return {Object} new modal instance

// example
var modal = MODAL.create('#Modal', {
    verticallyCenterModal: false
});

MODAL.closeAll()

MODAL.closeActive()

MODAL.open()

param {String} id

MODAL.close()

param {String} id

MODAL.verticallyCenter()

param {String} id

modal

var modal = MODAL.create('#Modal');

modal.open()

modal.close()

modal.verticallyCenter()

MODAL options

{
    zIndexStart: 1000,
    appendTo: (document.forms.length > 0 && document.forms[0].parentElement === document.body) ? document.forms[0] : document.body // Try to detect .NET webforms and append to the .NET form
}

modal defaults

{
    overlayHTML: '<div class="Overlay" data-state="off"></div>',
    attr: 'data-state',
    onState: 'on',
    offState: 'off',
    verticallyCenterModal: true
}