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 tingle :

tingle.modal.init();
tingle.modal.setContent('<p>Here some content</p>');
tingle.modal.open();

API

• init - init tingle (build modal, bind events, insert modal in dom)
• setContent - set modal content
• open - open modal
• close - close modal
• destroy - destroy tingle (unbind events, remove modal from dom)