模拟Window Alert弹出框 支持拖动以及ESC键盘退出

基本我自己封装的一些常用函数：KW.js

JS Code：

/** 
@ Name : Kingwell Javascript Library 
@ Author :kingwell 
@ Date : 2012-8-22 
@ Email : jinhua.leng##gmail.com 
@ Version : 1.2 
@ Update : http://kingwell-leng.iteye.com/blog/1570768 
功能： 
1:  $ID选择 
2： 事件绑定，事件移除，获取事件目标 
3： 阻止冒泡，阻止默认事件 
4： 显示隐藏 
5： 去除HTML 
6： 去除首尾空格 
7： 获取URL参数 
8： Cookie操作，设置，删除，获取 
9： 清除所有Cookie 
10：表格排序 
11: 动态转入Javascript 
12: 封装Ajax 
13：将HTML编码 
调用方法： 
KW.x(); 
 */  
(function () {  
    if (!window.KW) {  
        window.KW = {};  
    };  
    window.KW = {  
        version : "1.2",  
        $ : function () { //$()函数  
            var elements = new Array();  
            for (var i = 0; i <= arguments.length; i++) {  
                var element = arguments[i];  
                //如果是一个字符串那假设它是一个ID  
                if (typeof element == 'string') {  
                    element = document.getElementById(element);  
                }  
                //如果只提供了一个参数,则立即返回这个参数  
                if (arguments.length == 1) {  
                    return element;  
                }  
                //否则，将它添加到数组中  
                elements.push(element);  
            }  
            return elements;  
        },  
        /*-------------------- 事件处理 --------------------*/  
        addEvent : function (oTarget, oType, fnHandler) { //-----添加事件;  
            var oT = typeof oTarget == "string" ? this.$(oTarget) : oTarget;  
            if (!oT) {  
                alert('Not found \" ' + oTarget + ' \"');  
                return false  
            };  
            if (oT.addEventListener) { //for DOM  
                oT.addEventListener(oType, fnHandler, false);  
            } else if (oT.attachEvent) { //for IE  
                oT.attachEvent('on' + oType, fnHandler);  
            } else { //for Others  
                oT['on' + oType] = fnHandler;  
            }  
        },  
        removeEvent : function (oTarget, oType, fnHandler) { //-----移除事件;  
            var oT = this.$(oTarget);  
            if (!oT) {  
                alert('Not found \" ' + oTarget + ' \"');  
                return false  
            };  
            if (oT.removeEventListener) { //for DOM  
                oT.removeEventListener(oType, fnHandler, false);  
            } else if (oT.detachEvent) { //for IE  
                oT.detachEvent('on' + oType, fnHandler);  
            } else { //for Others  
                oT['on' + oType] = null;  
            }  
        },  
        getEvent : function (ev) { //-----获得事件-----  
            return ev || window.event;  
        },  
        getTarget : function (ev) { //-----获取目标----  
            return this.getEvent(ev).target || this.getEvent().srcElement;  
        },  
        stopPropagation : function () { //-----阻止冒泡-----  
            if (window.event) {  
                return this.getEvent().cancelBubble = true;  
            } else {  
                return arguments.callee.caller.arguments[0].stopPropagation();  
            }  
        },  
        stopDefault : function () { //-----阻止默认行为  
            if (window.event) {  
                return this.getEvent().returnValue = false;  
            } else {  
                return arguments.callee.caller.arguments[0].preventDefault();  
            }  
        },  
        /*-------------------- 常用函数 --------------------*/  
        toggleDisplay : function (id) { //-----显示，隐藏-----  
            var oTarget = this.$(id);  
            if (!oTarget) {  
                return false;  
            }  
            oTarget.style.display == 'none' ? oTarget.style.display = 'block' : oTarget.style.display = 'none';  
        },  
        stripHTML : function (agr) { //-----移除HTML-----  
            var reTag = /<(?:.|\s)*?>/g;  
            return agr.replace(reTag, '')  
        },  
        stripSpace : function (oTarget) { //-----移除空格-----  
            var re = /^\s*(.*?)\s*$/;  
            return oTarget.replace(re, '$1');  
        },  
        isEmail : function (e) { //-----Is E-mail  
            var re = /^[a-zA-z_][a-zA-Z_0-9]*?@\w{1,}.\[a-zA-Z]{1,}/;  
            return re.test(e);  
        },  
        /*-------------------- Cookie操作 --------------------*/  
        setCookie : function (sName, sValue, oExpires, sPath, sDomain, bSecure) { //-----设置Cookie-----  
            var sCookie = sName + '=' + encodeURIComponent(sValue);  
            if (oExpires) {  
                var date = new Date();  
                date.setTime(date.getTime() + oExpires * 60 * 60 * 1000);  
                sCookie += '; expires=' + date.toUTCString();  
            }  
            if (sPath) {  
                sCookie += '; path=' + sPath;  
            }  
            if (sDomain) {  
                sCookie += '; domain=' + sDomain;  
            }  
            if (bSecure) {  
                sCookie += '; secure';  
            }  
            document.cookie = sCookie;  
        },  
        getCookie : function (sName) { //-----获得Cookie值-----  
            var sRE = '(?:; )?' + sName + '=([^;]*)';  
            var oRE = new RegExp(sRE);  
            if (oRE.test(document.cookie)) {  
                return decodeURIComponent(RegExp['$1']);  
            } else {  
                return null;  
            }  
        },  
        deleteCookie : function (sName, sPath, sDomain) { //-----删除Cookie值-----  
            this.setCookie(sName, '', new Date(0), sPath, sDomain);  
        },  
        clearCookie : function () { //清除所有Cookie  
            var cookies = document.cookie.split(";");  
            var len = cookies.length;  
            for (var i = 0; i < len; i++) {  
                var cookie = cookies[i];  
                var eqPos = cookie.indexOf("=");  
                var name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;  
                name = name.replace(/^\s*|\s*$/, "");  
                document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"  
            }  
        },  
        convert : function (sValue, sDataType) { //类型转，根据不同类型数据排序，比如，整型，日期，浮点，字符串，接受两个参数，一个是值，一个是排序的数据类型  
            switch (sDataType) {  
            case "int":  
                return parseInt(sValue);  
            case "float":  
                return parseFloat(sValue);  
            case "date":  
                return new Date(Date.parse(sValue));  
            default:  
                return sValue.toString();  
            }  
        },  
        geterateCompareTRs : function (iCol, sDataType) { //比较函数，用于sort排序用  
            return function compareTRs(oTR1, oTR2) {  
                var vValue1,  
                vValue2;  
                if (oTR1.cells[iCol].getAttribute("value")) { //用于高级排序，比如图片，添加一个额外的属性来排序  
                    vValue1 = KW.convert(oTR1.cells[iCol].getAttribute("value"), sDataType);  
                    vValue2 = KW.convert(oTR2.cells[iCol].getAttribute("value"), sDataType);  
                } else {  
                    vValue1 = KW.convert(oTR1.cells[iCol].firstChild.nodeValue, sDataType);  
                    vValue2 = KW.convert(oTR2.cells[iCol].firstChild.nodeValue, sDataType);  
                }  
                if (vValue1 < vValue2) {  
                    return -1;  
                } else if (vValue1 > vValue2) {  
                    return 1;  
                } else {  
                    return 0;  
                }  
            }  
        },  
        tabSort : function (sTableID, iCol, sDataType) { //排序函数，sTableID为目标,iCol哪列排序，为必需，sDataType可选  
            var oTable = document.getElementById(sTableID);  
            var oTBody = oTable.tBodies[0];  
            var colDataRows = oTBody.rows;  
            var aTRs = [];  
            var len = colDataRows.length;  
            for (var i = 0; i < len; i++) {  
                aTRs[i] = colDataRows[i];  
            };  
            if (oTable.sortCol == iCol) { //如果已经排序，则倒序  
                aTRs.reverse();  
            } else {  
                aTRs.sort(this.geterateCompareTRs(iCol, sDataType));  
            }  
            var oFragment = document.createDocumentFragment();  
            var trlen = aTRs.length;  
            for (var j = 0; j < trlen; j++) {  
                oFragment.appendChild(aTRs[j]);  
            };  
            oTBody.appendChild(oFragment);  
            oTable.sortCol = iCol; //设置一个状态  
        },  
        GetQueryString : function (name) {  
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
            var r = window.location.search.substr(1).match(reg);  
            if (r != null)  
                return unescape(r[2]);  
            return null;  
        },  
        HTMLEscape : function (str) {  
            var s = "";  
            if (str.length == 0) {  
                return "";  
            }  
            s = str.replace(/&/g, "&amp;");  
            s = s.replace(/</g, "&lt;");  
            s = s.replace(/>/g, "&gt;");  
            s = s.replace(/ /g, "&nbsp;");  
            s = s.replace(/\'/g, "&#39;");  
            s = s.replace(/\"/g, "&quot;");  
            return s;  
        },  
        loadJS : function (url) {  
            var statu = true; //初始状态  
            var js = document.getElementsByTagName("script");  
            var len = js.length;  
            for (var i = 0; i < len; i++) {  
                if (js[i].getAttribute("src") == url) {  
                    statu = false; //如果已经添加，则设置为Flase，不再添加  
                }  
            }  
            if (statu) {  
                var script = document.createElement("script");  
                script.type = "text/javascript";  
                script.src = url;  
                var header = document.getElementsByTagName("head")[0];  
                header.appendChild(script);  
                  
            }  
        },  
        ajax : function (obj) {  
            if (!obj.url) {  
                return false;  
            };  
            var method = obj.type || "GET";  
            var async = obj.async || true;  
            var dataType = obj.dataType;  
            var XHR = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");  
            XHR.open(method, obj.url, async);  
            XHR.setRequestHeader('If-Modified-Since', 'Thu, 06 Apr 2006 00:00: 00 GMT');  
            XHR.send(null);  
            if (obj.sendBefore) {  
                obj.sendBefore();  
            };  
            XHR.onreadystatechange = function () {  
                if (XHR.readyState == 4 && (XHR.status >= 200 && XHR.status < 300 || XHR.status == 304)) {  
                      
                    if (obj.success) {  
                        if (dataType && dataType.toLocaleLowerCase() === "json") {  
                            obj.success(eval("(" + XHR.responseText + ")"))  
                        } else if (dataType && dataType.toLocaleLowerCase() === "xml") {  
                            obj.success(XHR.responseXML)  
                        } else {  
                            obj.success(XHR.responseText);  
                        }  
                    };  
                    if (obj.complete) {  
                        obj.complete()  
                    }  
                      
                } else {  
                    if (obj.complete) {  
                        obj.complete()  
                    }  
                    if (obj.error) {  
                        obj.error("The XMLHttpRequest failed. status: " + XHR.status);  
                    }  
                      
                }  
                  
            }  
        }  
          
    };  
      
})();  

 
JS Code：

/*-----KW.js调用说明-----
KW.$()           ----->ID选择器;
addEvent         ----->绑定事件;
removeEvent      ----->移除事件;
getEvent         ----->获得事件;
getTarget        ----->获得事件目标;
stopPropagation()----->阻止冒泡
stopDefault()    ----->取消默认事件

 */

/*
弹出框 函数说明
alertBox(sTitle, sContent, sType);
参数：
sTitle:弹出框标题
sContent:弹出框内容，可以是文本，HTML
sType:
 */
function alertBox(sTitle, sContent, sType) {
    
    var cl = document.createElement("div"),
    ac = document.createElement("div"),
    at = document.createElement("div"),
    act = document.createElement("div"),
    clo = document.createElement("span"),
    bh = document.body.offsetHeight;
    cl.setAttribute("id", "cover-layer");
    cl.setAttribute("style", "height:" + bh + "px");
    ac.setAttribute("id", "alert-container");
    at.setAttribute("id", "alert-title");
    act.setAttribute("class", "alert-content");
    clo.setAttribute("id", "alert-close");
    clo.setAttribute("class", "in-bl");
    clo.setAttribute("title", "close")
    
    cl.appendChild(ac);
    ac.appendChild(at);
    at.innerHTML = sTitle;
    at.appendChild(clo);
    ac.appendChild(act);
    act.innerHTML = sContent;
    
    if (sType == "prompt") {
        var ab = document.createElement("div"),
        as = document.createElement("button"),
        ar = document.createElement("button");
        ab.setAttribute("class", "alert-button");
        as.setAttribute("id", "alertSubmit");
        ar.setAttribute("id", "cancel");
        as.innerHTML = "Yes";
        ar.innerHTML = "No";
        ab.appendChild(as);
        ab.appendChild(ar);
        ac.appendChild(ab);
    }
    document.body.appendChild(cl);
    //垂直居中实现
    var ch = Math.ceil(document.documentElement.clientHeight / 2),
    lh = Math.ceil(ac.offsetHeight / 4);
    ac.setAttribute("style", "top:" + ch + "px;margin-top:" + -lh + "px");
    //响应ESC键
    KW.addEvent(document.body, "keyup", function () {
        if (KW.$("cover-layer") && KW.getEvent().keyCode == 27) {
            delAlert();
        }
    })
    if (sType == "prompt") {
        KW.addEvent("cancel", "click", function () {
            delAlert();
        })
    }
    if (sType == "prompt") {
        KW.addEvent("alertSubmit", "click", function () {
            delAlert();
            return true;
        })
    }
    //Drag and Drop
    var x;
    var y;
    var box = KW.$("alert-container");
    box.style.left = box.offsetLeft+"px";
    box.style.top = box.offsetTop+"px";
    KW.addEvent("alert-title", "mousedown", function () {
        x = KW.getEvent().clientX - parseInt(box.style.left);
        y = KW.getEvent().clientY - parseInt(box.style.top)
        KW.addEvent(document.body, "mousemove", mousemove);
        });
    document.onmouseup = function () {
        KW.removeEvent(document.body, "mousemove", mousemove);
    }
    function mousemove() {
        box.style.left= (KW.getEvent().clientX-x) + "px"
        box.style.top = (KW.getEvent().clientY - y) + "px"
    }
} //alertBox End

/*
删除遮盖层;
delAlert();
当需要删除遮盖层时，调整此函数即可;
 */
function delAlert() {
    KW.$("cover-layer").parentNode.removeChild(KW.$("cover-layer"));
}

CSS Code：

/*-- Alert --*/
#cover-layer{position:absolute; top:0; left:0; margin:auto; width:100%; height:100%; background:rgba(0,0,0,0.2); _background:#000; z-index:10000;}
#cover-layer #alert-container{width:400px; position:absolute; left:50%; margin-left:-100px; top:50%; background:#FFF; box-shadow:0 0 30px rgba(0,0,0,0.6); border-radius:5px;}
#cover-layer #alert-title{line-height:30px; padding:0 10px; font-weight:bold; border-top-left-radius:5px; border-top-right-radius:5px; background:#EEE; background:-moz-linear-gradient(#FFF,#EEE); background:-webkit-gradient(linear,0% 0%,0% 100%,from(#FFF),to(#EEE)); cursor:move}
#cover-layer .alert-content{padding:30px 20px;}
#cover-layer .alert-button{margin:auto auto 10px auto; text-align:center;}
#cover-layer button{min-width:50px; margin:auto 5px}
#cover-layer #alert-close{width:20px; height:20px; background:url(images/alert-delete.png) no-repeat center center; vertical-align:middle; float:right; cursor:pointer; margin:5px auto auto auto;}

HTML Code：

<!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>
<title>kingwell</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="../csslibs/main.css" />

</head>
<body>
<div style=" padding:50px">

    <div id="alertA">弹出框A测试 Click Me</div><br><br>
    <div id="alertB">弹出框B测试 Click Me</div>
    
</div>

<script type="text/javascript" src="../js/lib/KS.js"></script>

<script type="text/javascript">
/*----- Test AlertBox -----*/
KW.addEvent("alertA", "click", function () {
    alertBox("System Prompt", "<div class='strong'>Alert Test !按ESC键试试</div><br><br><input type='text'><br><br><br><br><button>Save</button><button>Cancel</button>");
    KW.addEvent("alert-close", "click", delAlert)
});

KW.addEvent("alertB", "click", function () {
    alertBox("Prompt", "<div class='strong a-c'>Are you sure you want to delete?</div>","prompt");
    KW.addEvent("alert-close", "click", delAlert)
});

</script>
</body>
<html>