Author: | TheOneAndOnlyZulu |
---|---|
Views Total: | 106 views |
Official Page: | Go to website |
Last Update: | April 29, 2022 |
License: | MIT |
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