Small Accessible Modal Window – Super Simple Modals

Preview:

Description:

A super simple and WCAG compliant modal window component built with vanilla JavaScript.

How to use it:

1. Import the Super Simple Modals library.

<!-- Base Stylesheet -->
<link rel="stylesheet" href="ssm-base.min.css" />
<!-- Optional Animations -->
<link rel="stylesheet" href="ssm-animations.min.css" />

import SuperSimpleModal from './dist/ssm.esm.js';

<!-- OR -->
<script src="./dist/ssm.min.js" defer></script>

2. Initiate the ssm class.

const modal = new SuperSimpleModal();

3. Create a basic modal window and display it on the screen.

modal.generate({
  title: 'Modal title',
  description: 'Modal description...',
  mainContent: 'Optional content',
});

4. Enable smooth animations. Default: false.

modal.generate({
  title: 'Modal title',
  description: 'Modal description...',
  willAnimate: true,
  animationTimeout: 300
});

5. Customize the action buttons.

modal.generate({
  title: 'Modal title',
  description: 'Modal description...',
  addText: 'Submit',
  removeText: 'Cancel',
});

6. Set the trigger button so that you can return the focus to it after the modal window has been closed.

modal.generate({
  title: 'Modal title',
  description: 'Modal description...',
  initiatorButton: e.target,
  callback: possitiveAction,
});
const possitiveAction = ({initiatorButton}) => {
  modal.remove( initiatorButton );
};

Changelog:

04/29/2022

• v1.2.1: ESM file bugfix