Give it a try

Tingle is a simple modal plugin written in pure JavaScript (Source code on GitHub).

• No dependencies required
• Fully customizable via CSS
• CSS transitions
• Simple API
• No extra files to download
• Created with UX in mind

Below you will find some examples for using tingle:

A simple modal Need buttons? Big content? No problem! Stick to me! ?

Installation

Method	Procedure
Bower	bower install tingle --save
NPM	npm install tingle.js --save
Basic download	download zip

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

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

Then, just include tingle in your document:

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

Use

// instanciate new modal
var modal = new tingle.modal({
    footer: true,
    stickyFooter: false,
    cssClass: ['custom-class-1', 'custom-class-2']
    onOpen: function() {
        console.log('modal open');
    },
    onClose: function() {
        console.log('modal closed');
    }
});

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

// add a button
modal.addFooterBtn('Button label', 'tingle-btn tingle-btn--primary', function() {
    // here goes some logic
    modal.close();
});

// add another button
modal.addFooterBtn('Dangerous action !', 'tingle-btn tingle-btn--danger', function() {
    // here goes some logic
    modal.close();
});

// open modal
modal.open();

// close modal
modal.close();
        

Options

Name	Type	Description
footer	boolean	Display a footer or not
stickyFooter	boolean	Set to true for a footer always visible on screen
onOpen	function	Callback to execute when tingle is open (after transition end)
onClose	function	Callback to execute when tingle is closed
cssClass	array	Custom CSS classes that will be added to tingle container

CSS

All tingle styles are available in CSS. Only some specific properties for positioning are processed by JavaScript. It means you can customize tingle to fit your needs. Tingle came with some useful styles for buttons:

Important: For the blur effect, you need to wrap your content inside a container with the "tingle-content-wrapper" class.

• tingle-btn
• tingle-btn--primary
• tingle-btn--default
• tingle-btn--danger
• tingle-btn--pull-left
• tingle-btn--pull-right

API

Name	Description
open()	Open modal (tingle-enabled class is added on body)
close()	Close modal and execute callback if exist
destroy()	Destroy modal (remove from dom and unbind events)
setContent(content)	Set modal content
getContent()	Get modal content
setFooterContent(content)	Set footer content
getFooterContent(content)	Get footer content
addFooterBtn(label, cssClass, callback)	Add buttons to footer (use cssClass for style and positioning)
resize()	Recalculate position of the modal
isOverflow()	Return true if modal height is bigger than viewport height