This time I will share jQuery Plugin and tutorial about Mobile First Toast Message Plugin With jQuery – showToast, hope it will help you in programming stack.
showToast is a simplest jQuery/Zepto based toaster that helps you display Android-style toast messages on the screen. By default, the toast message will auto dismiss after 1500ms.
How to use it:
1. Include the needed jQuery or Zepto JavaScript library on the webpage.
1 |
< script src = "/path/to/jquery.min.js" ></ script > |
3 |
< script src = "/path/to/zepto.min.js" ></ script > |
2. Make sure to load the jQuery showToast plugin’s script after jQuery/Zepto library.
1 |
< script src = "showToast.js" ></ script > |
2 |
< link rel = "stylesheet" href = "showToast.css" >< br type = "_moz" > |
3. Shows a custom toast message on the screen and config it to auto dismiss after 2500ms.
1 |
showToast.show( 'This is a Toast Message!' ,2500) |
4. Modify, override or adjust the following CSS snippets to create your own styles.
21 |
vertical-align : middle ; |
25 |
.showToastTips .showToastCon { |
26 |
display : inline- block ; |
28 |
background-color : rgba( 0 , 0 , 0 , 0.8 ); |
33 |
box-shadow: 0 0 8px rgba( 0 , 0 , 0 ,. 1 ); |
35 |
animation-name: fieldTipBounceIn; |
36 |
-webkit-animation-name: fieldTipBounceIn; |
37 |
-webkit-animation-fill-mode: both ; |
38 |
animation-fill-mode: both ; |
39 |
-webkit-animation-duration: . 18 s; |
40 |
animation-duration: . 18 s; |
43 |
fieldTipBounceIn { 0% { |
45 |
-webkit-transform: scale 3 d(. 3 , . 3 , . 3 ); |
46 |
transform: scale 3 d(. 3 , . 3 , . 3 ); |
50 |
-webkit-transform: scale 3 d( 1 , 1 , 1 ); |
51 |
transform: scale 3 d( 1 , 1 , 1 ); |
This awesome jQuery plugin is developed by zoeblow. For more Advanced Usages, please check the demo page or visit the official website.