Modal

Usage

var myModal = new Modal(options);

Options

Option Type Default Description
width int or string 0 Define the width of modal. You can use a int for px or string to pass px or % units.
Ex: '10%' or '10px' are valid options.
height int or string 0 Define the height of modal. You can use a int for px or string to pass px or % units.
Ex: '10%' or '10px' are valid options.
padding int or string 20 Define the padding of modal. You can use a int for px or string to pass px or % units.
Ex: '10%' or '10px' are valid options.
autoDimension boolean true When true, the modal will get the width and height of the content plus buttons, title, etc.
In that case, your content must have a defined width and height, like a image with width and height defined in CSS or inline.
When false, use the width and height provided.
autoShow boolean true When true, the modal will open when you create it (new Modal(options)). When false, you must use the show() to show the modal.
locked boolean false When true, click on the mask will not close the modal and the close button will not be rendered.
title string '' Set the title. Try to keep it short ;)
html string '' The content of the modal. Plain text or valid HTML are supported.
buttons array [] Modal can create buttons and define a callback to the click event.
The buttons are specified as objects with the following properties: title(string, required), className(string, optional) and click(function, required).
url string '' When provided, the HTML will be loaded via AJAX
onShow function '' Callback to call after modal be rendered
beforeClose function '' Callback to call just befor close. If it returns false, the Modal will not be closed
onClose function '' Callback to call after close
loading_text string 'loading...' Plain text or HTML to be displayed while the AJAX request is happening when the URL option is used.

Methods

Method Arguments Description
show() Show the modal if it is hidden
close() Close the modal
update() options Merges options with the current options of the modal and render the updated modal

Examples

Simple message Click to test

var myModal = new Modal({
    html: 'Hello world :)'
});

Simple message with title Click to test

var myModal = new Modal({
    title: 'Modal with title',
    html: 'Hello Word :) This modal has a title.'
});

Load a image Click to test

var myModal = new Modal({
    html: '<img src="http://lorempixel.com/people/720/480" width="720" height="480" />'
});

Load a remote data Click to test

var myModal = new Modal({
    title: "REMOTE DATA! YAY :)",
    url: 'http://site.com/stuff',
    loading_text: 'wait... worth it'
});

Using buttons Click to test

var myModal = new Modal({
    title: 'Buttons',
    html: 'Click on the bottons above',
    buttons: [{
        title: 'Cancel',
        className: 'btn btn-cancel',
        click: function () {
            // do your stuff
        }
    }, {
        title: 'Close',
        className: 'btn btn-cancel',
        click: function () {
            myModal.close();
        }
    }]
});

Lock modal Click to test

var myModal = new Modal({
    title: "You can't get out!",
    locked: true
});

Very long modal Click to test

var myModal = new Modal({
    title: 'very long modal',
    autoDimensions: false,
    width: 300,
    height: 2000
});

Using a element of the page Click to test

First, put the target element on a hidden containr:

<div style="display: none">
    <div id="myElement" style="width: 300px; height: 300px; text-align: center; background: silver;">
        The element :)
    </div>
</div>

Now, pass the element in the html key:


var myModal = new Modal({
    title: 'Look this element',
    autoDimension: false,
    width: 400,
    height: 400,
    html: document.querySelector('#myElement')
});
The element :)