sebastiendaniel-modal

Getting started

This module is a simplified browser module box (popup) container. It packages basic functionality without making any decisions for you. It's light-weight and has no dependencies.

Add the module to your project repo using NPM

npm install sebastiendaniel-modal

Require it where it is needed.

var Modal = require("sebastiendaniel-modal");

Making a modal

The exposed function is a constructor. It should be called using "new", but will handle a situation where "new" is forgotten. The constructor expects a single argument, a configuration object which must contain three properties:

• content: a string or HTMLobject. This will be injected inside the modal.
• events: an array of event names to listen to on the modal, when it is active.
• callback: your callback function which will be called whenever one of the event types in events occurs on the modal. The callback will always be provided the event object as an argument, and will be called with it's bound Modal instance as context (this === modal).

Example

var Modal = require("sebastiendaniel-modal"),
    x = new Modal({
        events: ["click", "blur"],
        callback: function(e) {
            if (e.type === "click") {
                if (/^save$/.test(e.target.className)) {
                    // do something with the modal content
                    // ...

                    // close the modal for good.
                    x.stop();
                    x = null;

                    return;
                }
            }
        },
        content: "<p>This is a modal, click OK to close it.</p><br/><br/><input class="save" type="button" value="OK" />"
    });

The modal object

Methods:

• start(): injects the modal into the DOM and binds it's event listeners.
• stop(): removes the modal from the DOM and removes it's event listeners.

Properties:

• html.modal: the modal element (see diagram below)
• html.wrapper: the wrapper element (see diagram below)
• html.content: the content element (see diagram below)
• startDelay: delay between appending modal to the DOM and adding class isActive to modal. This allows you to make use of CSS transitions. Defaults to 50ms
• stopDelay: delay between appending isInactive class to the modal and removing it from the DOM. This allows you to make use of CSS transitions. Defaults to 500ms

Modal UI diagram

Styles (CSS)

The project comes with very basic styling for the modal, it can be found in sebastiendaniel-modal/src/styles/modal.css