tingle.js

A simple modal plugin written in pure JavaScript (Source code on GitHub).

• No dependencies required
• Fully customizable via CSS
• CSS3 transitions
• Simple API
• No extra files to download

Demo

Example (tiny content) Example (big content)

Installation

bower install tingle

Tingle uses just one small CSS. Feel free to include it in your workflow (Less, Sass, etc...) and customize it to fit yours needs.

<link rel="stylesheet" href="tingle.min.css">

Then, just include tingle in your document :

<script src="tingle.min.js"></script>

Use

var modal = new tingle.modal({
    onClose: function() {
        console.log('close tiny modal');
    }
});

// init modal
modal.init();

// set content
modal.setContent('here some content');

// open modal
modal.open();

// close modal
modal.close();

// destroy modal (unbind events and remove from dom)
modal.detroy();