一.前言

最近在做一个项目，自己感觉系统自带的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. Java18-java语法基础——集合框架

    Java18-java语法基础——集合框架 一.什么是集合框架 1.集合框架:是为表示和操作集合而规定的一种统一的.标准的体系结构. 2.任何集合框架都包含三大块内容:对外的接口.接口的实现和对集合运 ...

  2. Maven Nexus3 安装，私服搭建

    为啥搭建Maven私服? 如果没有私服,我们所需的所有构件都需要通过maven的中央仓库和第三方的Maven仓库下载到本地,而一个团队中的所有人都重复的从maven仓库下载构件无疑加大了仓库的负载和浪 ...

  3. django 在centos 7 下 指定ip地址和端口 报错问题

    windows environment: python manage.py runserver host:port centos environment: python manage.py runse ...

  4. Windows7 VS2015 下编译 PythonQt3.2

    本文在使用vs2015编译python3.6.7源代码后,编译的PythonQt3.2.如果使用python二进制文件进行安装,注意python的路径即可 本机环境: 1.win7 64 旗舰版 2. ...

  5. 安卓ViewStub用法

    安卓ViewStub用法 在开发应用程序的时候,经常会遇到这样的情况,在运行时动态根据条件来决定显示哪个View或某个布局. 那么最通常的想法就是把可能用到的View都写在上面,先把它们的可见性都设为 ...

  6. 解决 “access violation at address xxxxxxxxx”错误

    在进行磁盘整理的时候,打开Foxmail的时候出现了“access violation at address32383137”错误 和“access violation at address00000 ...

  7. log4net 写日志

    转载地址:https://www.cnblogs.com/vichin/p/6022612.html   //基本使用 https://www.cnblogs.com/genesis/p/498562 ...

  8. 2019.02.11 bzoj1568: [JSOI2008]Blue Mary开公司（线段树）

    传送门 题意简述:维护整体加一条线段,求单点极值. 思路: 直接上李超线段树维护即可. 代码: #include<bits/stdc++.h> #define ri register in ...

  9. 虚拟机 django 端口无法连接

    我的虚拟机django服务器为192.168.27.100,使用启动命令python manage.py runserver 9001启动后,发现笔记本电脑的游览器无法连接 python@qinhan ...

  10. [Solution] JZOJ-5806 简单的操作

    [Solution] JZOJ-5806 简单的操作 题面 Description 从前有个包含n个点,m条边,无自环和重边的无向图. 对于两个没有直接连边的点u;v,你可以将它们合并.具体来说,你可 ...