Similar to Android's mobile phone webpage version toast and Android mobile phone toast
1. Write the js Code of toast first:
/**
* It imitates the Toast effect in android and is mainly used to display the prompt data without interrupting the normal execution of the program.
* @ 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 of the container
This. top = config. top; // distance from the upper part of the container
This. init ();
}
Var msgEntity;
Toast. prototype = {
// Initialize the position and content of the display.
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 );
// Set the message Style
Var toastMessageWidth = $ ('# toastmessage'). innerWidth ();
Var toastMessageHeight = $ ('# toastmessage'). innerHeight ();
Var rows wwidth = $ (window). width ();
Var success wheight = $ (window). height ();
Var newWidth = (required wwidth-toastMessageWidth-80)/2 + "px ";
Var newHeight = (optional wheight-toastMessageHeight-80)/2 + "px ";
MsgEntity.css ({'left': newWidth, 'z-Index': '000000', 'top': newHeight, 'background-color': 'black', 'color ': 'white ',
'Padding': '30px ', 'font-size': '18px', 'border': '3px solid # f8c26d '});
},
// Display the animation
Show: function (){
MsgEntity. fadeIn (this. time/2 );
MsgEntity. fadeOut (this. time/2 );
}
}
Function toastFunction (messageString ){
New Toast ({context: $ ('body'), message: messageString}). show ();
}
2. Add the jquery library and a style on your html homepage:
<Style type = "text/css">
# ToastMessage {
Position: absolute;
Border-radius: 15px;
Cursor: pointer;
}
</Style>
3. How to call:
ToastFunction ("called successfully! ");