给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("提示内容");