About Super Simple Modals

Super Simple Modals is a small Vanilla JavaScript library that does what it says on the tin. Allow you to create pop-up modals on your website in no time, with a tiny amount of code.

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Installing

Using npm:

$ npm install super-simple-modals

Using yarn:

$ yarn add super-simple-modals

Using unpkg CDN:

<script src="https://unpkg.com/super-simple-modals"></script>

Example

More code examples are available in the examples directory of the Github repo.

Initialise a basic modal

const modal = new SuperSimpleModal();

// Check if the open modal button exists.
const openModal = document.getElementById( 'open-modal' );
if ( openModal ) {
  openModal.addEventListener( 'click', (e) => {
    e.preventDefault();

    modal.generate({
      title: 'My modal title',
      description: 'My modal description...',
      initiatorButton: e.target,
      callback: possitiveAction,
      willAnimate: true,
    });
  });
}

Objectives

This package aims to be:

• Fully accessible: Complying to the latest WCAG guidelines, to AAA standard.
• Lightweight: We known webiste load times are key, not only to the ranking of your site, but the user experience. Our package will always remain as small as possible, & never weigh you down.
• Contain minimilistic styling: Make it look how you want without adding !important to every line of you css. Overriding styling should be a doddle, though we will give you a guiding hand with examples.

How do I make it work?

The Github wiki is where you'll find documentation for everything you'll need to know about working with & on this plugin should you want to add something that's missing.

Help me, I'm stuck!

Read through the wiki and still can't get it to work? Pop over to the discussions board, and we'll give you a hand.

I've got an idea?

Got ideas on how to improve this package, but not sure how to persue them? Head over to the discussion section of the repo, or if you've got the know how create a pull request. Sharing is caring.