【原创】贡献一个JS的弹出框代码...

一.前言

最近在做一个项目，自己感觉系统自带的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 <= 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:[email protected]
 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;
}

四：项目代码打包下载

点击下载程序源码

时间： 2024-10-10 01:50:06

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

android如何使用DOM来解析XML+如果做一个表情的弹出框

效果图: 如何解析以下的xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <array> <string>(#大笑)</string

Js弹出层，弹出框代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

js自定义弹出框

js自定义弹出框: 代码如下 <html> <head><title>自定义弹出对话框</title> <style type ="text/css" > .layout { width:2000px; height:400px; border:solid 1px red; text-align:center; } </style> <script type="text/javascript&quo

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

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

js 常见弹出框学习

模拟系统的弹出框 系统自带的弹出框 总结 链接  http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹出   http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/,网站提供打包好的资源下载. html中的基本结构: <div class="md-modal md-effect-1" id="mo

jquery实现一个简单的弹出框

自己改写一些jquery的部分代码,自己总结出来一个比较好用的jquery弹出框,留着以后工作时候再用.喜欢就拿走吧! 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

clipboard.js在弹出框中无法复制的问题

前几天发现了个bug,在jquery-ui的弹出框(dialog)中,使用clipboard.js实现的复制功能,竟然不会生效,后面查了下相关资料,发现不止jquery-ui的dialog不行,其他的模态框,例如bootstrap的,也是一样不会生效的.原因就是弹出框会自动focus,而复制的底层实现是要获取选中的内容,失去焦点后就无法获取到了,从而导致复制失败. 解决办法: 1)对于 Bootstrap 模态框(Modals)中使用,或是在其他修改焦点的类库中使用,你会希望将获得焦点的元素设置

一个简单的弹出框组件

个人写这个弹出框的原因就一个,就是能给我带来可复用,追求新,要简单,可扩展.要达到炫酷有点难度,分析后还是决定以功能为主,因为是用jq和animation实现的弹出框组件,所以看起来难度不大,简称co-dialog. 灵感来源,因为工作中用到dialog,发现UI设计的弹出框的风格一直在变化,于是每次都要重新写一个弹出框,无意中增加了无用的工作量,所以果断就封装成一个弹出框组件,目前的锥形仅支持PC,然后又加入了CSS3动画效果,如果要引入动画效果就需要高版本的Browser才能使用,期望你能一

Python 弹出框代码

  from ctypes import * user32 = windll.LoadLibrary('user32.dll')#调用dll文件 #a是得到弹出框的选择按钮的值 user32.MessageBoxA(0显示弹出框,显示消息内容,弹出框标题内容,0-6个选择) #乱码要添加编码格式 .decode('utf8').encode('GBK') a = user32.MessageBoxA(0, str.encode('你好!').decode('utf8').encode('GBK'