Customizable Modal Dialog JavaScript Library – simple-modal.js

Preview:

Description:

A simple, flexible and customizable JavaScript modal library for creating a variety of modal & dialog boxes in an elegant way.

How to use it:

You first need to load the stylesheet simple-modal.css and JavaScript simple-modal.js in your web page.

<link href="src/simple-modal.css" rel="stylesheet">
<script src="src/simple-modal.js"></script>

Create a basic modal window.

var modal1 = new SimpleModal({
    title: 'Simple Modal',
    body: '<p>This is a Simple Modal.</p>',
})

Create a confirm dialog with confirm and cancel buttons.

var modal2 = new SimpleModal({
    title: 'Confirm Dialog',
    body: '<p>This is a Confirm Dialog.</p>',
    buttons: [
        {
            value: 'cancel'
        },
        {
            value: 'OK',
            callback: function(modal) {
                modal.updateTitle('You clicked OK!');
                return false;
            }
        }
    ]
})

Show the modal & dialog on the screen.

modal1.show();
modal2.show();

All available configuration options.

// Disables scrolling on page whilst modal is shown.
disableScrolling: true,
// Animation time in ms for fadeIn and fadeOut functions.
transitionTime: 400,
//  HTML tag to wrap modal title string with.
titleTag: 'h4',
// Maximum number of modals to be displayed on page at one time. 
maximumModals: 6,
// Callback once modal is shown.
onComplete: null,
// Theme class to be applied to the modal.
theme: null,
// Whether or not clicking outside of the modal should close the modal.
closableOnOutsideClick: true,
// HTML string for the modal body content.
body: null,
// The title string for the modal.
title: null,
// Whether the close icon is available on the modal or not.
closable: false,
// extra-small, small, medium, large, extra-larg
siez: 'extra-small',
// The buttons which appear at the bottom of the modal, see button options for more info.
buttons: null

API methods.

var modal = new SimpleModal({ ... }).show(function(modal) {
    // The show method accepts one argument which is a callback ran once the
    // modal is in the DOM. The callback passes through the instance of the
    // modal we just created.
    // Returns instance of self
});
var modal = new SimpleModal({ ... }).close(function(modal) {
    // The close method accepts one argument which is a callback ran once the
    // modal has been removed from the DOM. The callback passes through the
    // instance itself.
    // Returns instance of self
});
var modal = new SimpleModal({ ... }).closeAll(function(modal) {
    // The closeAll method will close all currently open modals, any references
    // to these modals will still be available, the modals will no longer be in
    // the DOM though. Once again the closeAll method accepts one argument
    // which is a callback function ran once all modals have been removed from the DOM.
    // Returns instance of self
});
// The getModalElement method will return the javascript node object
// for the modal. This is useful if you need to bind to content within
// the modal once it has been created.
// Required to be ran separate from instantiating SimpleModal as it
// does not return instance of itself
var modal = new SimpleModal({ ... });
var modalElement = modal.getModalElement();
// The updateTitle method will update the modal title live in the DOM
// if there was a title set in the initial options. Otherwise it'll
// add the title to the options. If there was a title in the original
// options and the overwrite is set to true, this will also update the
// options to use the new title. So should the same instance of module
// be used again in future it will have the new title.
// Returns instance of self
var modal = new SimpleModal({ ... }).updateTitle('new title', overwrite);


// The updateBody method acts the same with regards to the updateTitle
// method, except it acts on the body option and accepts HTML as part
// of the new string.
// Returns instance of self
var modal = new SimpleModal({ ... }).updateBody('<p>new body</p>', overwrite);