Fake Android phone web version toast

1. Write your toast's JS code first:

/**
* Mimic the toast effect on Android, mainly for displaying cue data without interrupting the program's normal execution
* @param config
* @return
*/
var Toast = function (config) {
This.context = config.context==null?$ (' body '): config.context;//context
This.message = config.message;//Display content
This.time = config.time==null?6000:config.time;//Duration
This.left = config.left;//distance from the left side of the container
This.top = config.top;//distance from top of container
This.init ();
}
var msgentity;
Toast.prototype = {
Initialize the displayed location content, etc.
Init:function () {
$ ("#toastMessage"). Remove ();
Set the message body
var msgdiv = new Array ();
Msgdiv.push (' <div id= ' toastmessage ' > ');
Msgdiv.push (' <span> ' +this.message+ ' </span> ');
Msgdiv.push (' </div> ');
Msgentity = $ (Msgdiv.join (")). AppendTo (This.context);
Setting Message Styles
var toastmessagewidth = $ (' #toastMessage '). Innerwidth ();
var toastmessageheight = $ (' #toastMessage '). Innerheight ();
var windowwidth = $ (window). width ();
var windowheight = $ (window). Height ();
var newwidth = (windowwidth-toastmessagewidth-80)/2 + "px";
var newheight = (windowheight-toastmessageheight-80)/2 + "px";
Msgentity.css ({' Left ': newwidth, ' z-index ': ' 999999 ', ' top ': newheight, ' background-color ': ' Black ', ' color ': ' White ',
' Padding ': ' 30px ', ' font-size ': ' 18px ', ' border ': ' 3px solid #f8c26d '});
},
Show animations
Show:function () {
Msgentity.fadein (THIS.TIME/2);
Msgentity.fadeout (THIS.TIME/2);
}
}
function Toastfunction (messagestring) {
New Toast ({context:$ (' body '), message:messagestring}). Show ();
}

2. First add the jquery library and the style to your HTML home page:

<style type= "Text/css" >
#toastMessage {
Position:absolute;
border-radius:15px;
Cursor:pointer;
}
</style>

3. How to Invoke:

Toastfunction ("Successful call!");

Fake Android phone web version toast