Basic Stackable Toast Notification Plugin For jQuery
File Size: | 5.23 KB |
---|---|
Views Total: | 1333 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Just another jQuery material toast plugin used for creating temporary, stackable toast/alert notification messages that will destroy themselves after a specific timeout (or by mouse clicking).
How to use it:
1. Modify, override the default toast styles as displayed below and add them to your existing CSS file.
.sl-notification.alert { background-color: rgba(220,80,80,0.95); } .sl-notification.show { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } .sl-notification { position: fixed; padding: 12px 16px; margin: 0; font-size: 16px; color: #fff; background-color: rgba(0,0,0,0.9); text-align: left; border-radius: 2px; opacity: 0; line-height: 1.4; font-family: inherit; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s ease; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); }
2. Insert jQuery library and the JavaScript file jquery.basic.toast.js
into the html page.
<script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.basic.toast.js"></script>
3. Create a basic toast message that will be displayed at the right bottom of the document and auto dismiss itself after 3000ms (3 seconds).
$.Toast('Default toast message');
4. You can also create custom toast messages by passing the setting object as the second parameter to the $.Toast
function.
$.Toast('Toast message', { // width of the toast message 'width': 0, // auto dismiss after 3 seconds 'duration': 3000, // additional CSS(es) 'class': '', // or 'top' 'position': 'bottom', // or 'left' 'align': 'right', // z-index property 'zindex': 99999 });
Change log:
2017-08-16
- CSS update
This awesome jQuery plugin is developed by ncou. For more Advanced Usages, please check the demo page or visit the official website.