Pure JavaScript Modal Popup with CSS3 Transitions – tingle.js

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