JavaScript code
varmsg={count:0, Show:function(value,time,width) {//Type: Define the display style, three options: Success,notice,error;, not select the default is success; //Style: Use only the defined hint layer location, the default underlying cue bar 15px varMe=document; varComdom=me.createelement ("div"); Comdom.classname= "Message-container"; Comdom.setattribute (' Name ', ' I_message-container '); Comdom.id= "IMessage" + This. Count; ComDom.style.width=window.innerwidth+ "px"; varMdom=me.createelement ("div"); MDom.style.webkitAnimationDuration=time+ "S"; Mdom.classname= "Message-style message-animation"; if(width) {mDom.style.cssText+ = "width:" +width+ "px"; } mdom.innerhtml=value; Comdom.appendchild (Mdom); varHismessge=me.getelementsbyname (' I_message-container '); varI=hismessge.length-1; for(i;i>=0;i--){ if(Hismessge[i]) {me.body.removeChild (hismessge[i]);} Else{ Break}} me.body.appendChild (Comdom); ComDom.style.cssText+ = "Top:" + (window.innerheight/2-15) + "px"; This. count++; This. Destory (Comdom.id,time); }, Destory:function(id,time) {varDesme=function(){ varCdom=document.getElementById (ID); if(CDom) {document.body.removeChild (cDom); } }; SetTimeout (Desme,time*1000+500); }}
CSS Code
/*Start-Customize pop-up cue layer*/. Message-style{padding:0px 10px;margin:0 Auto;Min-width:100px;Max-width:90%;text-align:Center;position:relative;Opacity:0;-webkit-border-radius:3px;background:#383838;Border:1px solid #202020;Color:#fff;Z-index: +;Height:30px;Line-height:30px;width:80px;font-size:14px;-webkit-box-shadow:1px 1px 3px #202020;}@-webkit-keyframes message-transition{0%{opacity:0;}10%{Opacity:1;}90%{Opacity:1;}100%{Opacity:0;}}.message-animation{-webkit-animation-name:message-transition;-webkit-animation-duration:3s;-webkit-animation-timing-function:Linear;-webkit-animation-iteration-count:1;}. Message-container{text-align:Center;width:100%;Border:0px;padding:0px;position:fixed;}
Call Method:
Msg.show (' Hello word ', 2)