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

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

 

/*
Kingwell Javascript library
Author:Jinhua.leng#gmail.com
Date:2012-05-20
*/
(function () {
	if (!window.KW) {
		window.KW = {}
	} //命名空间
	
	window.KW = {
		
                 version:"V1.02",
		$ : 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 = this.$(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 () { //-----获得事件-----
			return window.event || arguments.callee.caller.arguments[0];
		},
		getTarget : function () { //-----获取目标----
			var ev = window.event || arguments.callee.caller.arguments[0];
			return ev.srcElement || ev.target;
		},
		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);
		},
		
		/*-------------------- DOM --------------------*/
		
		createContent : function (node, value, parendNode) {
			var n = document.createElement(node),
			c = document.createTextNode(value);
			n.appendChild(c);
			document.body.appendChild(n)
		},
		text : function (node, value) {
			this.$(node).innerHTML = value;
		},
		val : function (node, value) {
			this.$(node).value = value
		},
		size : function () {
			return this.size();
		},
		addElement : function (tag, id, value) {
			if (arguments.length <= 1) {
				return document.createElement(tag);
			} else {
				var tag = document.createElement(tag);
				tag.setAttribute(id, value);
				return tag;
			}
		},
		att : function (id, value) {
			if (arguments.length == 1) {
				return this.getAttibute.value;
			} else if (arguments.length == 2) {
				return setAtttube.value;
			} else {
				return false
			}
		},
		
		/*-------------------- Cookie操作 --------------------*/
		setCookie : function (sName, sValue, oExpires, sPath, sDomain, bSecure) { //-----设置Cookie-----
			var sCookie = sName + '=' + encodeURIComponent(sValue);
			if (oExpires) {
				sCookie += '; expires=' + oExpires.toGMTString();
			}
			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);
		}
		
	}; //WS End
	
	
})(); //Library End

 

 

基本代码：

 

/*-----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") {
		WS.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";
	WS.addEvent("alert-title", "mousedown", function () {
		x = KW.getEvent().clientX - parseInt(box.style.left);
		y = KW.getEvent().clientY - parseInt(box.style.top)
		WS.addEvent(document.body, "mousemove", mousemove);
		});
	document.onmouseup = function () {
		WS.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 代码：

 

/*-- 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;}

 HTLM代码：

 

<!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" />
</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/KW.js"></script>
<script type="text/javascript">
/*----- Test AlertBox -----*/
WS.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>");
	WS.addEvent("alert-close", "click", delAlert)
});

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

</script>
</body>
<html>