Tingle is a simple modal plugin written in pure JavaScript that creates a full-screen modal popup and rich content with CSS3 transitions for open/closed animations.
- No dependencies required
- Fully customizable via CSS
- CSS transitions
- Simple API
- No extra files to download
- Created with UX in mind
Easy to Use Modal/Alert/Dialog/Popup with Vanilla JS | EinsModal
How to make use of it:
1. Load the tingle.css style sheet into the header of your document.
<link href="dist/tingle.css" rel="stylesheet">
2. Load the basic JavaScript file tingle.js into the document as needed.
<script src="dist/tingle.js"></script>
3. Wrap the conditional content in a DIV container.
<div class="tingle-demo"> Modal Content </div>
4. Create a button to toggle the modal.
<button class="trigger-button">Lanuch the modal</button>
5. Modal formatting.
tingle.modal.init();
6. Enable the trigger button to trigger the corresponding model.
var btn = document.querySelector('.trigger-button');
btn.addEventListener('click', function(){
tingle.modal.setContent(document.querySelector('.tingle-demo').innerHTML);
tingle.modal.open();
});7. More API methods.
// close the modal
tingle.modal.close();
// remove the modal from DOM
tingle.modal.destroy();
// set modal content
tingle.modal.setContent('');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) |
API
| Name | Description |
|---|---|
| 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 the footer (use cssClass for style and positioning) |
| checkOverflow() | Allow repositioning 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 |
javascript modal popup with css3, tingle.js Plugin/Github
See Demo And Download
Official Website(robinparisi): Click Here
This superior jQuery/javascript plugin is developed by robinparisi. For extra advanced usage, please go to the official website.
