一.前言最近在做一个项目，自己感觉系统自带的alert()方法的弹出框实在是不堪入目，所以在网上找了一些资料，然后自己加工了一下，做出了自己的一个js弹出框，在这里贡献出来，希望对你有帮助.
二.开始在这里我们来一个获取验证码的页面来说明，也是在我项目用用到的一个页面。我们首先创建一个HTML的静态页面。其中代码如下:
<!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>自定义提示</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>
<sectionclass="infos">
<labelclass="fLeft">手机号</label>
<input type="hidden"value="oLlIXuNocl66hPYHHt8vwAOLhWTA"name="openid"/>
<spanclass="commeInput"><input type="text"class="no-border"name="phone"id="phone"value=""placeholder="请输入您的手机号"/>
</span>
<em id="mob"class="yg-input-close rt12"></em></section>
<sectionclass="infos no-boder">
<labelclass="fLeft">验证码</label>
<spanclass="commeInput"><input type="text"class="no-border2"name="code"id="code"value=""placeholder="请输入验证码"/>
<input type="button"id="btn"class="btn_mfyzm"value="获取验证码"onclick="getverify()"/>
</span>
<em id="mob2"class="yg-input-close lt50"></em></section>
<div><button type="button"class="btn-pay"onclick="go()"title="确定">确    定</button></div>
</div>
</form>
</div>
</body>
</html>
sAlter.js就是我们封装过后的js。我们先看看使用的效果：
来看看我们的页面js代码如下：
<script type="text/javascript">function timer(time) {varbtn = $("#btn");
btn.attr("disabled",true);//按钮禁止点击btn.val(time <=0?"发送验证码": (""+ (time) +"秒"));varhander =setInterval(function () {if(time <=0) {
clearInterval(hander);//清除倒计时btn.val("发送验证码");
btn.attr("disabled",false);returnfalse;
}else{
btn.val(""+ (time--) +"秒");
}
},1000);
}//绑定手机号码function go() {varphone = $("#phone").val();if(phone ==""|| phone =="请输入11位手机号码"|| phone ==null) {NewAlertBox("warning","请输入11位手机号码",3000);return;
}varmyreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;if(!myreg.test($("#phone").val())) {
NewAlertBox("warning","请输入有效的手机号码！",3000);
$("#phone").val("");return;
}varcode = $("#code").val();if(code ==""|| code =="请输入验证码"|| code ==null) {
NewAlertBox("warning","请输入验证码！",3000);return;
}//$.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","绑定成功！",3000, function () { WeixinJSBridge.call('closeWindow'); });//}//else {//NewAlertBox("warning", data.msg, 3000, function () { WeixinJSBridge.call('closeWindow'); });//}//}//});}//获取验证码function getverify() {varphone = $("#phone").val();if(phone ==""|| phone =="请输入11位手机号码"|| phone ==null) {
NewAlertBox("warning","请输入11位手机号码",3000);return;
}varmyreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;if(!myreg.test($("#phone").val())) {
NewAlertBox("warning","请输入有效的手机号码！",3000);
$("#phone").val("");return;
}
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","验证码获取成功！",3000);//} else {//NewAlertBox("warning", data.msg, 3000);//}//}//});}</script>
从上面的代码中我们看到这个封装的js使用起来非常简单 NewAlertBox("warning", "请输入11位手机号码", 3000);传入一些参数就可以达到我们要的效果。
三.核心代码我们要的效果也达到了，sAlter.js这个里面究竟是个什么样子的，其中代码如下:
/*js弹窗代码:用户体验极佳的Alert提示效果
e-mail:616931@QQ.com
source:枫伶亿博客*/vart;varargl,funcf;//获取指定ID的元素function $xp(id) {returndocument.getElementById(id);
}//通用事件获取接口function getEvent()
{if(CheckBrowser()=='IE')returnwindow.event;
func=getEvent.caller;while(func!=null)
{vararg0 = func.arguments[0];if(arg0)
{if((arg0.constructor==Event || arg0.constructor ==MouseEvent)|| (typeof(arg0)=="object"&& arg0.PReventDefault &&arg0.stopPropagation))
{returnarg0;
}
}
func=func.caller;
}returnnull;
}//alertfunction NewAlertBox(itype,msg,time){//time为消失时间varmsgbg,msgcolor,bordercolor,content,posLeft,posTop,imgName;
argl=arguments.length;if(argl>3)
{funcf= arguments[3];}//外部方法//弹出窗口设置msgbg ="#FFF";//内容背景msgcolor ="#f66f15";//内容颜色bordercolor ="#d8bfd8";//边框颜色//遮罩背景设置//判断图片类型if(itype.toUpperCase()=='OK')//提示通过imgName ='../Img/ts_ok.png';elseif(itype.toUpperCase()=='ERROR')//提示报错imgName ='../Img/ts_error.png';else//提示警告或者其他imgName ='../Img/ts_warning.png';
content="<img src='"+ imgName +"' alt='img ' style='width:78px;height:78px;'/><br/>"+msg;varsWidth,sHeight;if(document.documentElement && document.documentElement.clientHeight &&document.documentElement.clientWidth)
{
sWidth=document.documentElement.clientWidth;
sHeight=document.documentElement.clientHeight;
}else{
sWidth= screen.availWidth -20;//防止溢出if(screen.availHeight >document.body.scrollHeight){
sHeight= screen.availHeight;//少于一屏}else{
sHeight= document.body.scrollHeight;//多于一屏}
}//创建遮罩背景varmaskObj = 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);//创建弹出窗口varmsgObj = 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";varevent= getEvent();//申明eventif(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";}else{//posLeft = event.pageX + 10 + "px";//ff下要申明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";//创建内容varbodyObj = 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;//生成窗口document.body.appendChild(msgObj);
$xp("msgdiv").appendChild(bodyObj);if(time !='') t=setTimeout("CloseMsg()",time);elset=setTimeout("CloseMsg()",3000);//默认三秒后自动消失returnfalse;
}//移除对象function CloseMsg(){
$xp("msgdiv").removeChild($xp("msgbody"));
document.body.removeChild($xp("msgdiv"));
document.body.removeChild($xp("maskdiv"));
clearTimeout(t);//停止计时器t =null;if(argl>3)
{funcf();}//执行外部传入的函数}//判断浏览器类型function CheckBrowser(){varcb ="Unknown";if(window.ActiveXObject){
cb="IE";
}elseif(navigator.userAgent.toLowerCase().indexOf("Firefox") != -1){
cb="Firefox";
}elseif((typeofdocument.implementation !="undefined") && (typeofdocument.implementation.createDocument !="undefined") && (typeofHTMLDocument !="undefined")){
cb="Mozilla";
}elseif(navigator.userAgent.toLowerCase().indexOf("Opera") != -1){
cb="Opera";
}returncb;
}
四：项目代码打包下载 点击下载程序源码
