Here we have a page to get the verification code to illustrate, as well as a page used in my project. We first create a static page of HTML. Where the code is as follows:
<! doctype html public "-//w3c//dtd html 4.01 transitional//en" "http:// Www.w3.org/TR/html4/loose.dtd "> <html> <head> <meta http-equiv=" Content-type " content = "text/html; charset=gb2312" > <title> custom Tips </title> <script src= "Jquery-1.8.3.js" type= "Text/javascript" ></script> <script src= "Salter.js" type= "Text/javascript" > </script> <link href= "Getrelationbyphone.css" rel= "stylesheet" type= "Text/css" / > </head> <body> <div> <form id= "Form1" action= "#" method= "POST" > <div> <section class= "Infos" >
<label class= "FLeft" > Mobile number </label> <input type= "hidden" value= " Ollixunocl66hpyhht8vwaolhwta " name=" "OpenID" /> <span class= "Commeinput" ><input type= "text" class= "No-border" name= "Phone" id= "Phone" value= " placeholder=" Please enter your mobile number "/> </span> <em id= "mob" class= "yg-input-close rt12" ></em></section > <section class= "infos no-boder "> <label class= "Fleft" > Verification Code </label> < span class= "Commeinput" ><input type= "text" class= "No-border2" name= "code" id= "code" value= "" Placeholder= "Please enter the verification code" /> <input type= "button" id= "btn" class= "Btn_mfyzm" value= "Get Authentication Code" onclick= "Getverify ()" /> </span> <em id= " Mob2 " class=" Yg-input-close lt50 "></em></section> <div><button type= "button" class= "Btn-pay" onclick = "Go ()" title= "OK" > definite &nbsp &nbsp definite </button></div> </div> </form> </div> </ Body> </html>
The
Salter.js is the JS that we encapsulate. Let's take a look at the effect used:
to see our page JS code as follows:
<script type= "Text/javascript" > function timer (Time) {
var btn = $ ("#btn"); btn.attr ("Disabled", true) //button No click btn.val (time <= 0 ? "Send authentication Code" : (""
+ (time) + "seconds"); var hander = setinterval (function () { if (time <= 0) { Clearinterval (hander); //Clear Countdown
btn.val ("Send Verification Code"); &nBsp;btn.attr ("Disabled", false); return
False } else { btn.val ("" + (time--)
+ "seconds"); }
}, 1000);
&NBSP;&NBSP;&NBSP;&NBSP} //Binding mobile number function go () {
var phone = $ ("#phone"). Val (); if (phone == "" | | phone == "Please enter 11-digit mobile number" | | phone == null) { Newalertbox ("Warning", )Please input 11 digit mobile phone number ", 3000);
return; } var myreg = /^ ((13[0-9]{1}) | ( 15[0-9]{1}) | (18[0-9]{1}))
+\D{8}) $/; if (!myreg.test ($ ("#phone"). Val ()) { newalertbox ("Warning", ) Please enter a valid mobile phone number!
", 3000);
$ ("#phone"). Val ("");
return; } var code
= $ ("#code"). Val (); if (code == "" | | code == "Please enter the verification code" | | code == null) { &nbsP; newalertbox ("Warning", ) Please enter the verification code!
", 3000);
return; &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP}// $.ajax ({// url: "Relationcarnobyphone.ashx?" Type=2&code= " + code + " &phone= " + phone,// type: "POST",// dataType: "JSON",// cache: false,// success: function (data) {// if (data.code == "0") { newalertbox ("Warning", ) bind successfully!
", 3000, function () { weixinjsbridge.call (' CloseWindow '); }); }// else {// newalertbox ("Warning", data.msg, 3000, function () { weixinjsbridge.call ('
CloseWindow '); }; }// }//
}); } //Get Authentication Code function getverify () {
var phone = $ ("#phone"). Val (); if (phone == "" | | phone == "Please enter 11-digit mobile number" | | phone == null) {
Newalertbox ("Warning", "Please enter 11-digit mobile phone number", 3000);
return; } var myreg = /^ ((13[0-9]{1}) | ( 15[0-9]{1}) | (18[0-9]{1}))
+\D{8}) $/; if (!myreg.test ($ ("#phone"). Val ()) { newalertbox ("Warning", ) Please enter a valid mobile phone number!
", 3000); $ ("#phone"). Val ("");
return;
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP} timer (120); $.ajax ({// url: "relationcarnobyphone.ashx?type=1&phone=" + phone,// type: "POST",// dataType: "JSON",// cache: false,// success: function (data) {// if (data.code == "0") { Newalertbox ("OK", "verification code to obtain success!"
", 3000); } else {//
newalertbox ("Warning", data.msg, 3000); }// }//
}); } </script>
From the above code we see that this encapsulated JS is very simple to use Newalertbox ("Warning", "Please enter 11-digit mobile phone number", 3000); pass in some parameters to achieve the effect we want.
Core code
We're going to have the same effect, salter.js what it looks like inside, where the code is as follows:
/* &NBSP;JS Window Code: User experience very good alert prompt effect e-mail:616931@qq.com source: Feng Ling billion blog * * var t;
var argl,funcf; Gets the element function $xp (ID) { return document.getelementbyid (ID) of the specified ID;}//Universal event Get Interface function
GetEvent () { if (checkbrowser () = = ' IE ') return window.event; func=getEvent.caller;
while (func!=null) { var arg0 = func.arguments[0]; if (arg0) { if (arg0.constructor==event | | arg0.constructor ==mouseevent) | | (typeof (arg0) = = "Object" && arg0.preventDefault && arg0.stoppropagation)) { return arg0; }
} func=func.caller;
} return null; }//alert Function newalertbox (itype,msg,time) {//time for vanishing time var msgbg,msgcolor,bordercolor,content
, Posleft,postop,imgname; argl=Arguments.length; if (argl>3) {funcf = arguments[3];} External methods //Popup settings msgbg = "#FFF"; //content background msgcolor = "#f66f15
"; //content color bordercolor = #d8bfd8; //border color //mask background setting //determining picture Type if (itype.touppercase () = = ' OK ') //prompt via imgName = '.
/img/ts_ok.png '; else if (itype.touppercase () = = ' ERROR ') //Prompt for error imgName = '..
/img/ts_error.png '; else //prompt warning or other imgName = '.
/img/ts_warning.png '; content = "<img src= '" + imgName + "' alt= ' img ' style= ' width:78px;height:78px; '
/><br/> " + msg;
var sWidth,sHeight; if (document.documentelement && document.documentelement.clientheight & & document.documEntelement.clientwidth) { swidth =
document.documentElement.clientWidth;
sHeight = document.documentElement.clientHeight; &NBSP;&NBSP;&NBSP;&NBSP} else { swidth = screen.availwidth - 20;//Prevent overflow if (screen.availheight > document.body.scrollheight) { sheight = screen.availheight; //less than one screen }else{ sheight = document.body.scrollheight; //more than one screen &NBSP}  } //create matte background var maskobj = documEnt.createelement ("div");
maskobj.setattribute (' id ', ' maskdiv ');
//maskobj.setattribute (' onclick ', ' closemsg () ');
maskObj.style.position = "Absolute";
maskObj.style.top = "0";
maskObj.style.left = "0";
maskObj.style.background = "#fff";
maskObj.style.filter = "Alpha (opacity=40);";
maskObj.style.opacity = "0.4";
maskObj.style.width = sWidth + "px";
maskObj.style.height = sHeight + "px";
maskObj.style.zIndex = "10000";
document.body.appendchild (Maskobj); //Create pop-up window var msgobj = document.createelement ("div") msgobj.setattribute ("id", "
Msgdiv ");
msgobj.setattribute ("OnClick", "closemsg ()");
msgobj.style.position = "Absolute";
sWidth = 230;
sHeight = 180;
msgObj.style.width = sWidth + "px"; //msgobj.style.height = sheight + "px"; var event = getevent ()//DECLARE Event if (checkbrowser () = = ' IE ') { // posleft = event.clientx + 10; //postop = event.clienty
+ document.documentElement.scrollTop; posLeft = (document.documentelement.clientwidth - swidth) / 2 +
"PX";
posTop = 50 + document.documentElement.scrollTop + "px"; //posTop = (document.documentelement.clientheight- sheight) / 2 +
"PX"; &NBSP/ else { //posLeft = event.pageX + 10 + "px";
FF to declare px //posTop = event.pageY + 10 + "px"; posLeft = (document.documentelement.clientwidth - swidth) / 2 +
"PX"; postop = 50 + document.documentelement.scrolltop + "px"; //posTop = (document.documentelement.clientheight- sheight) / 2 +
"PX";
} msgObj.style.top = posTop;
msgObj.style.left = posLeft;
msgObj.style.fontSize = "18px";
msgObj.style.background = msgbg;
msgObj.style.border = "1px solid " + bordercolor;
msgObj.style.zIndex = "10001";
//Create Content var bodyobj = document.createelement ("div");
bodyobj.setattribute ("id", "msgbody");
bodyObj.style.padding = "10px";
bodyObj.style.lineHeight = "1.5em";
bodyObj.style.color = msgcolor;
bodyObj.style.textAlign = "center";
//var txt = document.createtextnode (content);
//bodyobj.appendchild (TXT);
bodyObj.innerHTML = content; //Build Window docuMent.body.appendChild (Msgobj);
$XP ("Msgdiv"). AppendChild (Bodyobj);
if (time != ') t=settimeout ("Closemsg ()", time);
else t=settimeout ("closemsg ()", 3000)//default three seconds after automatically disappearing return false; //Remove Object Function closemsg () { $XP ("Msgdiv"). RemoveChild ($xp ("Msgbody"))
Document.body.removeChild ($xp ("Msgdiv")); document.body.removechild ($xp ("Maskdiv")); cleartimeout (t);/Stop Timer t =
Null if (argl>3) &NBSP;{FUNCF ();}
Perform external incoming functions}//Judge browser type Function checkbrowser () { var cb = "Unknown"; if (window. ActiveXObject) { cb = "IE"; } Else if (Navigator.userAgent.toLowerCase (). IndexOf ("Firefox") != -1) {
cb = "Firefox"; }else if ((typeof document.implementation != "undefined") && (typeof document.implementation.createdocument != "undefined") && (typeof htmldocument != "undefined")) {
cb = "Mozilla";
}else if (Navigator.userAgent.toLowerCase (). IndexOf ("opera") != -1) {
cb = "Opera";
} return cb; }
Another JS pop-up small window instance
<! doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://
Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml ">
<head> <meta http-equiv= "Content-type" content= "text/html; charset=utf-8″ /> <title> Pop-up Small window example </title> </head> <body> <a href= "javascript:void (0);" onclick= "Show ();return false;"
> Click Pop-up Small Window </a> <script type= "Text/javascript" > var isshow=0;//0 small window does not show, 1 small window has been shown Function creatediv () {
var msgw,msgh,bordercolor; msgw=400;//the width of the prompt window msgh=505;//the height of the prompt window
var swidth,sheight; if ( top.location == self.location ) doc = document;
var docElement = doc.documentElement;
sWidth=docElement.clientWidth;
sHeight = docElement.clientHeight; if ( docElement.scrollHeight > sHeight )
sHeight = docElement.scrollHeight;
var bgobj=document.createelement ("div");
bgobj.setattribute (' id ', ' bgdiv ');
bgobj.style.position= "Absolute";
bgobj.style.top= "0″;
bgobj.style.left= "0″;
bgobj.style.background= "#777 ″; bgobj.style.filter= "Progid:DXImageTransform.Microsoft.Alpha (style=3,opacity=25,
Finishopacity=75″;
bgobj.style.opacity= "0.6″;
bgObj.style.width=sWidth + "px"; bgobj.style.height=sheight + "px";
bgObj.style.zIndex = "10000";
document.body.appendchild (Bgobj); var msgobj=document.createelement
("div");
msgobj.setattribute ("id", "msgdiv");
msgobj.setattribute ("Align", "center");
msgObj.style.position = "Absolute";
msgObj.style.left = "50%";
msgobj.style.background= "#fff";
msgObj.style.marginLeft = " -200px" ; msgObj.style.top = (document.documentelement.clientheight/2+
document.documentelement.scrolltop-252) + "px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px"; msgobj.style.zindex = "10001"; msgObj.innerHTML = "This is the little window that pops up!" <br /><a href=\ "javascript:void (0); \ onclick= ' Delwind ();return false; '
> Point I close Window </a> ";
document.body.appendchild (Msgobj); } function delwind () { document.getelementbyid ("Bgdiv"). style.display= "None";
document.getelementbyid ("Msgdiv"). style.display= "None";
isshow=0; } function show () { isshow=1; if (!
document.getElementById ("Msgdiv"))//small window does not exist creatediv (); else {
document.getElementById ("Bgdiv"). style.display= "";
document.getelementbyid ("Msgdiv"). style.display= ""; document.getelementbyid("Msgdiv"). style.top= (document.documentelement.clientheight/2+document.documentelement.scrolltop-252) + "px"; } } </script> </body>