Accessible Stackable Modal In JavaScript – modal-handler.js

Preview:

Description:

modal-handler.js is a Vanilla JavaScript modal library to create accessible, stackable modal dialogs to overlay any content on the top of the page.

More Features:

• Press ESC to close the active modal.
• Center the modal vertically or not.
• Adds role="dialog" and tabindex attributes to the modal.
• Traps focus Inside your modal.
• Restores the focus to the previously active element when the modal is closed.
• With background overlay or not.
• Convenient API methods.

How to use it:

1. Install & Download.

# NPM
$ npm install vanilla-js-modal --save

2. Import the modal library into your project.

var MODAL = require('vanilla-js-modal');

<!-- Browser -->
<script src="./umd/modal-handler.js"></script>

3. Import the necessary stylesheet.

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

4. Create the HTML for the modal.

<div id="myModal" class="CustomModal" data-state="off">
  Your Modal Content Here
  <p><a class="Close" href="#">Close modal</a><p>
</div>

5. Create a trigger link to toggle the modal.

<a id="Trigger" href="#Modal">Open a modal</a>

6. Initialize the modal library and done.

var modal = MODAL.create('#Modal', {
    // options here
});

7. Apply your own CSS styles to the modal.

.CustomModal {
  /* your styles here */
}

8. Possible options to config the modal.

var modal = MODAL.create('#Modal', {
    hasOverlay: true,
    overlayClass: 'Overlay',
    overlayIsOff: true,
    attr: 'data-state',
    onState: 'on',
    offState: 'off',
    verticallyCenterModal: true
});

9. API methods.

// override options
MODAL.config({/*options*/})
// set options
MODAL.setDefaults({/*options*/})
// create a new instance
MODAL.create({/*options*/});
// close all modals
MODAL.closeAll();
// close active modal
MODAL.closeActive();
// open a modal
MODAL.open(modalID);
// close a modal
MODAL.close(modalID);
// center a modal vertically
MODAL.verticallyCenter(modalID);
// open the modal
instance.open();
// close the modal
instance.close();
// center the modal vertically
instance.verticallyCenter();