Accessible Stackable Modal In JavaScript – modal-handler.js

Category: Javascript , Modal & Popup | April 22, 2020
Author: TheC2Group
Views Total: 66 views
Official Page: Go to website
Last Update: April 22, 2020
License: MIT


Accessible Stackable Modal In JavaScript – modal-handler.js


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

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

// set options

// create a new instance

// close all modals

// close active modal

// open a modal;

// close a modal

// center a modal vertically

// open the modal;

// close the modal

// center the modal vertically

You Might Be Interested In:

Leave a Reply