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
}

a11y notes

Making an accessible dialog box

License

MIT © The C2 Group