Javascript+jquery: Fake Android toast Prompt box

The toast in Android apps is primarily intended to prompt the user with the same intent as the alert () method in JavaScript, but the beauty is better than alert, and the effect of making a toast to Android in light applications is more of a native app experience.

Purpose: Create a faux-Android toast effect on an HTML page

Language:javascript+jquery

Method declaration:
function toast (message, duration)

Parameter description:
String Message-toast hint Content
int duration-toast display duration (optional "Long", "short" or a specific number of milliseconds, "short" is 5000, "Long" is the default "short" when this parameter is not filled)

Method Body:

vartoast_id = 0;//external variable to hold the timer ID generated by the settimeoutvarZIndex = 99;//The Z-index can be adjusted on its own to ensure that it is not obscured by other elements .functiontoast (message, duration) {window.cleartimeout (toast_id); //If you call two toasts in a short time, clear the last timeout 　　 if(document.getElementById ("App_toast")! =undefined) {//The last toast did not disappear, this time force stop animation and delete the element$ ("#app_toast"). Stop (); Document.body.removeChild (document.getElementById ("App_toast")); }//setting the time-out periodDuration = duration==NULL?" Short:d uration; if(duration== "Short") Duration = 2000; Else if(duration== "Long") Duration = 5000; //Defining new elements 　　 vardiv = document.createelement ("div"); Div.setattribute ("Style", "Position:fixed;top:89%;text-align:center;width:95%;z-index: "+ zindex);
Div.setattribute ("id", "app_toast");
　　//write InnerHTML content, Z-index for app_tpast z-index value plus 1,value for hint content div.innerhtml = ' <input type="Button" id= "App_txt_toast" style= "padding-left:20px;padding-right:20px;border-radius:8px;opacity:0.2;height : 20px;background: #000000; color: #ffffff; Border:none;z-index: ' + (zindex+1) + '; "value=" ' +message+ ' "/> ';　　Document.body.appendChild (DIV); //Add element to document $ ("#app_txt_toast"). Animate ({height: ' 29px ', opacity: ' 0.7 '}, +, function () {}); $("#app_toast"). Animate ({top: ' 85% '}, +, function () {}); //Make a toast slide effect from the bottom //Last duration milliseconds after fadeout toast_id = window.settimeout (function () {$ (　　　"#app_toast"). FadeOut ($, function () {Document.body.removeChild (document.getElementById ("App_toast"));    toast_id = 0; })}, duration);}

Call Method:Toast ("message") or toast ("message", 3000) or toast ("message", "short")

Javascript+jquery: Fake Android toast Prompt box