Tingle Js – Pure JavaScript Modal/Popup

In this article, we will discuss Tingle Js – Pure JavaScript Modal / Popup. It’s a wonderful resource, fulfill all our modal/popup related requirements with no dependency. Means jQuery is not required for this plugin/resource. It’s easy to integrate with Angular, React or Vue Js as per our needs.

Features Tingle Js

• No dependencies required
• Fully customizable via CSS
• CSS transitions
• Simple API
• No extra files to download
• Created with UX in mind
• Open Source Plugin

Installation

Just need to add the CSS and js file in your project.

Adding CSS:

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

Adding Js:

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

You can customize the CSS as per your design.

In your node project where we can manage npm for package management. You can use the given npm command to add this plugin/resource in your project.

npm install tingle.js --save

Use Tingle Js

// 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();

Available Options

Some of the options available to work with tingle js smoothly. Such as:

• 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 wich appears on the close button (mobile version)

API Available Options

Return true if modal height is bigger than viewport height

• 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)

Examples:

You can check the working example here. Also, you can get all the source code from GitHub repository.

If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee