Author: | robinparisi |
---|---|
Views Total: | 1,744 views |
Official Page: | Go to website |
Last Update: | June 2, 2018 |
License: | MIT |
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)