Author: | robinparisi |
---|---|
Views Total: | 366 views |
Official Page: | Go to website |
Last Update: | February 7, 2023 |
License: | MIT |
Preview:

Description:
The tingle.js library helps you create fullscreen, rich-content modal popups with pure JavaScript and CSS3 transitions for open/close animations.
Basic usage:
1. Load the tingle.css stylehsheet in the header of your document.
<link href="dist/tingle.css" rel="stylesheet">
2. Load the core JavaScript file tingle.js in the document where needed.
<script src="dist/tingle.js"></script>
3. Wrap your modal content into a DIV container. OPTIONAL
<div class="tingle-demo"> Modal Content </div>
4. Create a button to toggle the modal.
<button class="trigger-button">Lanuch the modal</button>
5. Create a new instance of the tingle modal.
var myMpdal = new tingle.modal({ // options here });
6. Enable the trigger button to launch the matched modal.
var btn = document.querySelector('.trigger-button'); btn.addEventListener('click', function(){ myModal.setContent(document.querySelector('.tingle-demo').innerHTML); myModal.open(); });
7. Available modal options.
var myMpdal = new tingle.modal({ // callbacks onClose: null, onOpen: null, beforeOpen: null, beforeClose: null, // enable modal footer stickyFooter: false, footer: false, // additional CSS classes cssClass: [], // close label closeLabel: 'Close', // close methods closeMethods: ['overlay', 'button', 'escape'], });
8. API methods.
// set modal content myModal.setContent(content); // get modal content myModal.getContent(); // set footer content myModal.setFooterContent(content); // get footer content myModal.getFooterContent(); // add buttons to the footer myModal.addFooterBtn(label, cssClass, callback) // check overflow myModal.checkOverflow(); myModal.isOverflow(); // open the modal myModal.open(); // close the modal myModal.close(); // remove the modal from DOM myModal.destroy();
Changelog:
v0.16.0 (02/07/2023)
- Dynamic padding bottom for content