Tingle is a simple modal plugin written in pure JavaScript (Source code on GitHub).
Below you will find some examples for using tingle:
Method | Procedure |
---|---|
Bower | bower install tingle --save |
NPM | npm install tingle.js --save |
Basic download | download zip |
Tingle uses just one small CSS. Feel free to include it in your workflow (Less, Sass, etc...) and customize it to fit your needs.
<link rel="stylesheet" href="tingle.min.css">
Then, just include tingle in your document:
<script src="tingle.min.js"></script>
// 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();
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) |
All tingle styles are available in CSS. Only some specific properties for positioning are processed by JavaScript. It means you can customize tingle to fit your needs. Tingle came with some useful styles for buttons:
Note: The blur effect use backdrop-filter and will not work on some browsers.
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 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 |
Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Sed posuere consectetur est at lobortis. Curabitur blandit tempus porttitor. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.
Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Curabitur blandit tempus porttitor. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.
Curabitur blandit tempus porttitor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.