一.前言

最近在做一个项目，自己感觉系统自带的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="确定">确&nbsp &nbsp 定</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 <=  ? "发送验证码" : ("" + (time) + "秒"));

        var hander = setInterval(function () {

            if (time <= ) {

                clearInterval(hander); //清除倒计时

                btn.val("发送验证码");

                btn.attr("disabled", false);

                return false;

            } else {

                btn.val("" + (time--) + "秒");

            }

        }, );

    }

    //绑定手机号码

    function go() {

        var phone = $("#phone").val();

        if (phone == "" || phone == "请输入11位手机号码" || phone == null) {

            NewAlertBox("warning", "请输入11位手机号码", );

            return;

        }

        var myreg = /^((([-]{})|([-]{})|([-]{}))+\d{})$/;

        if (!myreg.test($("#phone").val())) {

            NewAlertBox("warning", "请输入有效的手机号码！", );

            $("#phone").val("");

            return;

        }

        var code = $("#code").val();

        if (code == "" || code == "请输入验证码" || code == null) {

            NewAlertBox("warning", "请输入验证码！", );

            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", "绑定成功！", , 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位手机号码", );

            return;

        }

        var myreg = /^((([-]{})|([-]{})|([-]{}))+\d{})$/;

        if (!myreg.test($("#phone").val())) {

            NewAlertBox("warning", "请输入有效的手机号码！", );

            $("#phone").val("");

            return;

        }

        timer();

//        $.ajax({

//            url: "RelationCarNoByPhone.ashx?type=1&phone=" + phone,

//            type: "POST",

//            dataType: "json",

//            cache: false,

//            success: function (data) {

//                if (data.code == "0") {

                    NewAlertBox("ok", "验证码获取成功！", );

//                } 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[];

  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>)

 {funcf = arguments[];}//外部方法

 //弹出窗口设置

 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 - ;//防止溢出

         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 = "";

 maskObj.style.left = "";

 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 = "";

 document.body.appendChild(maskObj);

 //创建弹出窗口

 var msgObj = document.createElement("div")

 msgObj.setAttribute("id","msgdiv");

 msgObj.setAttribute("onClick","CloseMsg()");

 msgObj.style.position ="absolute";

 sWidth = ;

 sHeight = ;

 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) /  + "px";

  posTop =  + 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) /  + "px";

  posTop =  + 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 = "";

 //创建内容

 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()",);//默认三秒后自动消失

 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>)

 {funcf();}//执行外部传入的函数

}

//判断浏览器类型

function CheckBrowser(){

    var cb = "Unknown";

    if(window.ActiveXObject){

        cb = "IE";

    }else if(navigator.userAgent.toLowerCase().indexOf("firefox") != -){

        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") != -){

        cb = "Opera";

    }

    return cb;

}

四：项目代码打包下载

点击下载程序源码

【原创】贡献一个JS的弹出框代码...的更多相关文章

  1. js自定义弹出框

    js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="te ...

  2. 代码录播：jQueryMobile 实现一个简单的弹出框效果

    今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ ^_^ 阅读原文:www.gbtags.com  

  3. js 常见弹出框学习

    模拟系统的弹出框 系统自带的弹出框 总结 链接  http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹 ...

  4. jsp + js + 前端弹出框

    在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框 代码: var a = "Hello ...

  5. js swal()弹出框

    做前端开发的时候时常会遇到修改成功.新增成功这类弹出框,用alert的话未免有点太low了,而swal()是一个简单又实用的弹出框方法 alert 弹出框样式如下: swal() 弹出框样式如下: 代 ...

  6. js登录弹出框插件

    第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...

  7. 做一个iframe的弹出框

    群里有个人想在微信页面里面加弹出框.作为前端的我,想着不可能这样做.后来一个人说了: A:如果对方没有防盗链的话,你可以建个页面,内置iframe 到他的页面,然后把url 的参数也传入你的ifram ...

  8. js实现弹出框跟随鼠标移动

    又是新的一天网上冲浪,在bing的搜索页面下看到这样一个效果: 即弹出框随着鼠标的移动而移动.思路大概为: 调用onmousemove函数,将鼠标的当前位置赋予弹出框即可 //html <div ...

  9. js实现弹出框的拖拽

    //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <d ...

随机推荐

  1. Linux驱动之定时器在按键去抖中的应用

    机械按键在按下的过程中会出现抖动的情况,如下图,这样就会导致本来按下一次按键的过程会出现多次中断,导致判断出错.在按键驱动程序中我们可以这么做: 在按键驱动程序中我们可以这么做来取消按键抖动的影响:当 ...

  2. 单系统登录机制SSO

    一.单系统登录机制 1.http无状态协议 web应用采用browser/server架构,http作为通信协议.http是无状态协议,浏览器的每一次请求,服务器会独立处理,不与之前或之后的请求产生关 ...

  3. CITROEN C8 BSI HC12 Mileage Correction with Digiprog3

    CITROEN C8 BSI HC12 odometer correction pinout to Digiprog III Digiprog 3 mileage programmer. The BS ...

  4. PostFix添加多个端口

    /usr/local/*/config/postfix/master.cf 在/etc/services中搜索smtp,复制,添加smtp2<与上面一步对应起来的服务名>,后面为需要添加的 ...

  5. 教你用PS快速抠出长发

    抠简单的长发背景时可以利用快速选择工具,十分方便就能抠出来. 这类背景的图片只需要一个工具就行了,没错,只用快速选择工具. 拖到ps,然后选择快速选择工具. 用工具选中大部分的人 选择.选择并遮住 选 ...

  6. zookeeper 服务挂掉重启后，dubbo 服务是不会自动重新注册上的

    今天遇到一个问题: 系统初始有两个dubbo 服务 , A 和 B , 都是正常注册到zookeeper 上的, 但是zookeeper 服务机房 断电导致 服务宕机, 那就重启吧. 一切正常. 但是 ...

  7. python中for循环的三种遍历方式

    #!/usr/bin/env python# -*- coding: utf-8 -*-if __name__ == '__main__': list = ['A', 'B', 'C', 'D'] # ...

  8. Xpath在选择器中正确，在代码中返回的是空列表问题

    一.问题: 在进行爬虫的时候我们会用到xpath解析html文件,但是会有一种情况就是在xpath选择器中可以使用,但是在代码中就无法使用的情况. 二.原因: 1.是元素中有tbody的原因,这个元素 ...

  9. python函数（二）

    python函数(二) 变量的作用域 1.局部变量与全局变量 在函数内创建的变量被称为局部变量,这类变量的生命周期与函数相同,当函数执行完毕时,变量也就随之消失. 此类变量只能在函数内部调用,函数外不 ...

  10. bzoj4555(多项式求逆解法)

    //和以前写的fft不太一样,可能是因为要取模?? #include<iostream> #include<cstring> #include<cmath> #in ...