Pure JavaScript Modal Popup with CSS3 Transitions – tingle.js

Preview:

Description:

tingle.js helps you create fullscreen, rich-content modal popup with pure JavaScript and CSS3 transitions for open / close animations.

Basic usage:

Load the tingle.css stylehsheet in the header of your document.

<link href="dist/tingle.css" rel="stylesheet">

Load the core JavaScript file tingle.js in the document where needed.

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

Wrap your modal content into a DIV container.

<div class="tingle-demo">
  Modal Content
</div>

Create a button to toggle the modal.

<button class="trigger-button">Lanuch the modal</button>

Initialize the modal.

tingle.modal.init();

Enable the trigger button to launch the matched modal.

var btn = document.querySelector('.trigger-button');
btn.addEventListener('click', function(){
  tingle.modal.setContent(document.querySelector('.tingle-demo').innerHTML);
  tingle.modal.open();
});

More API methods.

// close the modal
tingle.modal.close();
// remove the modal from DOM
tingle.modal.destroy();
// set modal content
tingle.modal.setContent('');

Changelog:

v0.13.2 (06/02/2017)