Tingle.js 2KB Pure Vanilla Javascript Modal/Popup Window Library Full Examples With Source Code

 

Welcome folks today in this blog post we will be looking at a modal/popup window library called tingle.js which is 2KB in size. All the full source code of the application is shown below.

 

 

 

 

 

Get Started

 

 

 

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

 

 

Installation

 

 

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

 

 

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

Then, just include tingle in your document:

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

 

 

 

Usage

 

 

 

// instanciate new modal
var modal = new tingle.modal({
    footer: true,
    stickyFooter: false,
    closeMethods: ['overlay', 'button', 'escape'],
    closeLabel: "Close",
    cssClass: ['custom-class-1', 'custom-class-2'],
    onOpen: function() {
        console.log('modal open');
    },
    onClose: function() {
        console.log('modal closed');
    },
    beforeClose: function() {
        // here's goes some logic
        // e.g. save content before closing the modal
        return true; // close the modal
        return false; // nothing happens
    }
});

// set content
modal.setContent('<h1>here\'s 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();

 

See also  Build a OMDb API Movie Info Finder Web App in Javascript Using Boostrap 4 Full Project For Beginners

 

 

Options

 

 

Name Type Description
footer boolean Display a footer or not
stickyFooter boolean Set to true for a footer always visible on screen
closeMethods array Available close methods (overlay, button, escape)
onOpen function Callback to execute when tingle is open (after transition end)
onClose function Callback to execute when tingle is closed
beforeOpen function Callback to execute before opening the modal
beforeClose function Callback to execute before closing the modal (must return true to close the modal)
cssClass array Custom CSS classes that will be added to tingle container
closeLabel string Label which appears on the close button (mobile version)

 

 

 

CSS Classes

 

 

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

 

 

 

Methods

 

 

 

open() Open modal (tingle-enabled class is added on body)
close() Close modal and execute callback if exist
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)
checkOverflow() Allow to reposition the modal (useful with asynchronous content)
isOverflow() Return true if modal height is bigger than viewport height
destroy() Destroy modal (remove from dom and unbind events)
resize() deprecated Deprecated since v0.8 and will be removed in v1.0
See also  Javascript & jQuery Project to Remove Duplicate or Repeating Strings From Textarea in Browser Using HTML5 & CSS3 Full Project For Beginners

 

Leave a Reply