【原创】贡献一个JS的弹出框代码...
2015-07-18 12:09
615 查看
一.前言
最近在做一个项目，自己感觉系统自带的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> <section class="infos"> <label class="fLeft">手机号</label> <input type="hidden" value="oLlIXuNocl66hPYHHt8vwAOLhWTA" name="openid" /> <span class="commeInput"><input type="text" class="no-border" name="phone" id="phone" value="" placeholder="请输入您的手机号"/> </span> <em id="mob" class="yg-input-close rt12"></em></section> <section class="infos no-boder"> <label class="fLeft">验证码</label> <span class="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) {
var btn = $("#btn");
btn.attr("disabled", true); //按钮禁止点击
btn.val(time <= 0 ? "发送验证码" : ("" + (time) + "秒"));
var hander = setInterval(function () {
if (time <= 0) {
clearInterval(hander); //清除倒计时
btn.val("发送验证码");
btn.attr("disabled", false);
return false;
} else {
btn.val("" + (time--) + "秒");
}
}, 1000);
}
//绑定手机号码
function go() {
var phone = $("#phone").val();
if (phone == "" || phone == "请输入11位手机号码" || phone == null) {
NewAlertBox("warning", "请输入11位手机号码", 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", "请输入有效的手机号码！", 3000);
$("#phone").val("");
return;
}
var code = $("#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() {
var phone = $("#phone").val();
if (phone == "" || phone == "请输入11位手机号码" || phone == null) {
NewAlertBox("warning", "请输入11位手机号码", 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", "请输入有效的手机号码！", 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:枫伶亿博客
*/
var t;
var argl,funcf;
//获取指定ID的元素
function $xp(id) {
return document.getElementById(id);
}
//通用事件获取接口
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为消失时间
var msgbg,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';
else if(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;
var sWidth,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; //多于一屏
}
}
//创建遮罩背景
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);
//创建弹出窗口
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();//申明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";
}
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";
//创建内容
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;
//生成窗口
document.body.appendChild(msgObj);
$xp("msgdiv").appendChild(bodyObj);
if(time != '') t=setTimeout("CloseMsg()",time);
else t=setTimeout("CloseMsg()",3000);//默认三秒后自动消失
return false;
}
//移除对象
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(){
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;
}四：项目代码打包下载
点击下载程序源码
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js获取颜色,颜色3中类型的转换
- JSP
- 关于js的特性慢慢思考
- 如何在网页打开时弹出通知,JS代码
- JS正则表达式验证账号、手机号、电…
- 引用JS表单验证大全 以后方便…
- return new ModelAndView("redirect:/login.jsp");
- 在HTML网页上打印需要的内容，JS代…
- JavaScript引擎的工作原理
- JavaScript和Java的区别
- 如何系统地学习JavaScript
- js this和$(this)区别
- JavaScript实现模仿桌面窗口的方法
- JSP学习笔记（三）：关于服务器和SVN的区别
- js实现固定显示区域内自动缩放图片的方法
- 深入理JavaScript闭包
- jsp日期格式化
- JavaScript的特殊函数
- javascript顺序加载图片的方法
- JavaScript 没有函数重载&Arguments对象