Getting Started

There are only a handful of functions you need in-order to get started with this Library, these are:

• generate()
• remove()
• and a callback function.

In its most basic form, to simply show text, you could just use the generate function. To start you'll want an event handler that will trigger the modal to open. In this example it's a button with the id of open-modal.

Index.html

<button id="open-modal">Open my modal</button>

In our index.js file, I'm going to check if the open-modal button is present on the page, if it is then I'll instantiate the SuperSimpleModals class & add a click event listener for our button.

Index.js

const openModal = document.getElementById( 'open-modal' );
if ( openModal ) {

    // Initiate the ssm class.
    const modal = new SuperSimpleModal();

    openModal.addEventListener( 'click', (e) => {
        //...
    });
}

Inside the event listener we then want to add the method that will output the modal to the screen. This is the generate method. For a full list of parameters for this object see the api reference page of the wiki.

In this example we're asking the user if they accept the terms and conditions of our app. We set a title, description, Accept button text, the initiatorButton, which is the button we clicked in-order to open the modal (this is important for accessibility) & a callback function, which is the logic that is fired when the user clicks the accept button.

modal.generate({
    title: 'Do you accept the terms & conditions',
    description: 'My app terms and conditions are...',
    addText: 'I Accept',
    initiatorButton: e.target,
    callback: userAccepted,
    params: {
	originalButton: e.target,
    }
});

Our callback function will simply add a cookie to say that the user has accepted the terms & close the modal.

const userAccepted = ({originalButton}) => {
				
    // Set the user cookie.
    document.cookie = "userAcceptedTerms=true";

    // Remove the modal & return the focus to the original button.
    modal.remove( originalButton );
};

And that's it. You all together our Index.js file might look something like this:

   
import SuperSimpleModal from '../node_modules/super-simple-modals/dist/super-simple-modals.esm.js';

(function () {

	'use strict';

	// Check if ssm is defined.
	if ( 'undefined' !== typeof SuperSimpleModal ) {

		// Check if the open modal button exists.
		const openModal = document.getElementById( 'open-modal' );
		if ( openModal ) {

			// Initiate the ssm class.
			const modal = new SuperSimpleModal();

			// Click handler 
			openModal.addEventListener( 'click', (e) => {
				e.preventDefault();

				// Generates a modal.
				modal.generate({
                                    title: 'Do you accept the terms & conditions',
                                    description: 'My app terms and conditions are...',
                                    addText: 'I Accept',
                                    initiatorButton: e.target,
                                    callback: userAccepted,
                                    params: {
	                                originalButton: e.target,
                                    }
                                });
			});

			// The action taken when you click the positive action button.
			const userAccepted = ({originalButton}) => {
				
				// Set the user cookie.
                                document.cookie = "userAcceptedTerms=true";

				// Remove the modal & return the focus to the original button.
				modal.remove( originalButton );
			};
		}
	}
})();