给Jquery添加alert,prompt方法，类似系统的Alert，Prompt，可以响应键盘，支持拖动

我们在调用系统的Alert，prompt的弹出提示时，不同的系统会有不同的提示框，视觉效果不统一，而且不好看，功能单一，现在我们通过Jquery模拟Alert，prompt，现实统一视觉效果，而且内容丰富的弹出提示。

Jquery可以扩展自己的功能，如果对Jquery开发插件不熟悉的人可以到官方网去看看文档，比较简单易懂。

 

JS代码：

/*
 *  本插件基于JQUERY
 *  Jquery版本: 1.7.2
 *        Date:2012-06-28
 *
 *  ---------- 接口说明： ----------
 *
 *  --本插件采用kw命名空间，给Jquery添加静态方法，故调用方法为  $.kw.方法名 参数如下：
 *  --调用方法：
 *  --alert  $.kw.alert(content,title,callBack)
 *  --prompt $.kw.prompt(title,content,callBack)
 *
 *
 *  --   title 标题名称 如果缺省，则为默认标题，如："系统提示"
 *  -- content 内容显示的内容
 *  --callback 回调函数，单击确定后要执行的内容
 *
 *
 *  --功能：类似系统功能，支持拖动，响应键盘事件，ESC退出，Enter确定，以及回调函数功能。
 *
 *
 */
$(function () {

	$.kw = {
		title      : "System information", //默认标题 可修改
		speed      : 400, //默认速度 可修改
		buttonName : "OK", //确定按钮默认名称 可修改
		cancel     : "Cancel", //取消按钮默认名称 可修改
		content    : "Content",
	
		
		 //移除遮盖层
		del : function () {
			$("#alert-layer").remove();
		},
		//响应ESC键盘退出
		esc : function () { 
			$(document).keyup(function (event) {
				if (event.which == 27) {
					$.kw.del();
				}
			});
		},


		//内容显示功能
		alert : function (sContent, sTitle, callBack) {
			var title = sTitle || this.title;
			var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button></div></div><div class='alert-bottom'></div></div></div>";
			
			$(layer).fadeIn(this.speed).appendTo("body");
			this.setting();
			this.move();
			$("#alert-button").focus();
			$("#alert-close").bind("click", this.del); //移除层
			$("#alert-button").bind("click", function () {
				if (callBack) {
					callBack();
				}
				$.kw.del();
				
			}); //移除层
			this.esc();
		},
		
		
		
		//提示
		confirm : function (sContent, callBack, sTitle) {
			var title = sTitle || this.title;
			var content = sContent || this.content;
			var layer = "<div id='alert-layer'><div id='alert-container'><div class='alert-top'></div><div class='alert-box'><div id='alert-title'>" + title + "<div id='alert-close' title='Close'></div></div><div id='alert-content'>" + sContent + "</div><div class='alert-button'><button id='alert-button'>" + this.buttonName + "</button><button id='alert-cancel'>" + this.cancel + "</button></div></div><div class='alert-bottom'></div></div></div>";
			
			$(layer).fadeIn(this.speed).appendTo("body");
			this.setting();
			$("#alert-button").focus(); //获得焦点
			this.move(); //拖动
			$("#alert-close").bind("click", this.del); //移除层
			$("#alert-cancel").bind("click", this.del); //移除层
			$("#alert-button").bind("click", function () {
				$.kw.del();
				if (callBack) {
					callBack();
				};
				
			}); //移除层
			this.esc();
		},		
		
		
		//框拖动功能
		move : function () {
			$("#alert-title").mousedown(function (event) {
				var l = parseInt($("#alert-container").css("left")),
				t = parseInt($("#alert-container").css("top"));
				x = event.pageX - l;
				y = event.pageY - t;
				$("body").bind("mousemove", function (event) {
					$("#alert-container").css({
						"left" : (event.pageX - x)
					});
					$("#alert-container").css({
						"top" : (event.pageY - y)
					});
					//$("#alert-container").fadeTo(0,0.9)
				});
			});
			$("body").mouseup(function () {
				$("body").unbind("mousemove");
				//$("#alert-container").fadeTo(0,1)
			});
			
		},
		
	
		//设置背景层与内位置
		setting : function () {
			var bcw = document.documentElement.clientWidth,
		  	    bch = document.documentElement.clientHeight,
			    bsh = document.documentElement.scrollHeight,
			    aw  = $("#alert-container").width() / 2,
			    ah  = $("#alert-container").height() / 2;
			$("#alert-layer").css("height", bsh);
			$("#alert-container").css({
				"top"  : bch / 2 - ah,
				"left" : bcw / 2 - aw
			});
		}
		
		
	//$.kw  End	
	};


});

CSS代码

#alert-layer button:focus {
	border: 1px solid #AAA !important;
	background: #789 !important;
	color: white;
	outline: none
}
#alert-layer {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #333;
	line-height: 1;
	z-index: 10000;
	background: rgba(0,0,0,0.1)
}
#alert-layer #alert-container {
	border-radius: 3px;
	padding: 10px;
	width: 390px;
	position: fixed;
	_position: absolute;
}
#alert-layer .alert-top {
	background: url(images/conner2.png) no-repeat left top;
	height: 10px;
}
#alert-layer .alert-bottom {
	background: url(images/conner2.png) no-repeat left bottom;
	height: 10px;
}
#alert-layer #alert-title {
	font-size: 15px;
	height: 30px;
	line-height: 25px;
	padding: 0 10px;
	position: relative;
	font-weight: bold;
	cursor: move;
}
#alert-layer #alert-close {
	background: url(images/close.gif) no-repeat center center;
	width: 25px;
	height: 25px;
	position: absolute;
	cursor: pointer;
	right: 2px;
	top: 0px;
}
#alert-layer .alert-button {
	padding: 5px 10px;
	text-align: right
}
#alert-layer #alert-content {
	background: #F1F1F1;
	border-top: 1px solid #B9B9B9;
	border-bottom: 1px solid #B9B9B9;
	padding: 10px 15px;
}
.alert-box {
	background: url(images/tc_bg.png) repeat-y left top;
	padding: 0 6px
}

#alert-layer button {
	padding: 5px;
	border: 1px solid #CCC;
	margin: auto 5px;
	border-radius: 2px;
	min-width: 60px;
}
#alert-layer h1, #alert-layer h2, #alert-layer h3, #alert-layer h4 {
	margin: 10px auto;
	font-size: 16px
}

JS代码

$.kw.alert("提示内容")
$.kw.alert("提示内容","系统提示")//修改弹出框提示标题
$.kw.comport("提示内容");