【原創】貢獻一個JS的彈出框代碼...

2019-11-14 15:55:25

字體：大中小

來源：轉載

供稿：網友

一.前言

最近在做一個項目，自己感覺系統自帶的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: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;}//alertfunction 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;}