一.前言

最近在做一个项目，自己感觉系统自带的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. [leetcode]77. Combinations组合

    Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. Example: I ...

  2. PHP开发——基础

    简介 l  PHP Hypertext Preprocessor 超文本预处理器,是嵌入到HTML文件中的服务器端的脚本语言: l  一个PHP文件中,可以包含多种代码:HTML.CSS.JS.Jqu ...

  3. 设计模式学习心得<汇总>

    绝大部分程序员其实用不上设计模式. - 创建 结构 行为 描述 在软件工程中,创建型模式是处理对象创建的设计模式,试图根据实际情况使用合适的方式创建对象.基本的对象创建方式可能会导致设计上的问题,或增 ...

  4. windows平台下的oracle ORA-01031的解决方法

    今天下午遇到一个很怪异的问题,在windows平台下sqlplus  / as sysdba登陆数据库,提示权限不足, 当时就纳闷了,sys用户登陆数据库还能权限不足,问题出现了,就开始寻找解决方法呗 ...

  5. python_day8_socket

    目录 客户端/服务器架构 socket逻辑结构 socket概念 套接字的概念 TCP与UDP套接字应用 recv与recvfrom的区别 粘包现象及处理 认证客户端的链接合法性 socktserve ...

  6. delphi 中record 的类操作符重载简介

    今天简单介绍一下 delphi 中record 的类操作符重载使用,就是如何 实现 record 之间的简单操作. 关于类操作符重载 ,大家可以看官方的文档. Delphi allows certai ...

  7. 判断jquery对象是否具有某指定属性或者方法的几种方法

    1.typeof 运算符:返回一个用来表示表达式的数据类型的字符串.("number", "string", "boolean", &quo ...

  8. JQuery续

    一.表单属性选择器 :enabled :disabled :checked :selected <body> <form> <input type="check ...

  9. iostat 命令详解

    前言 话说搞运维的人没有两把"刷子",都不好意思上服务器操作.还好,我还不是搞运维的,我一直都自诩是开发人员,奈何现在的东家运维人员"水"的一比,还要我这个自诩 ...

  10. Asp.Net Core 禁用预编译

    在.NET Core 2 Web API应用程序中,MS VS 2017中的发布到文件夹功能产生: <ProjectAssembly>.PrecompiledViews.dll <P ...