給Jquery添加alert,prompt方法，相似系統的Alert，Prompt，能夠響應鍵...

給Jquery添加alert,prompt方法，相似系統的Alert，Prompt，能夠響應鍵盤，支持拖動

博客分類：
• Javascript
• CSS
• jQuery插件系列

重置Alert 模擬Alert Jquery Alert 插件開發 Jquery插件開發 

 

咱們在調用系統的Alert，prompt的彈出提示時，不一樣的系統會有不一樣的提示框，視覺效果不統一，並且很差看，功能單一，如今咱們經過Jquery模擬Alert，prompt，現實統一視覺效果，並且內容豐富的彈出提示。

 

Jquery能夠擴展本身的功能，若是對Jquery開發插件不熟悉的人能夠到官方網去看看文檔，比較簡單易懂。

 

 

 

Js代碼  

/*
 *  本插件基於JQUERY
 *  Jquery版本: 1.7.2
 *        Date:2012-06-28
 *      Author:Kingwell
 *      E-mail:jinhua.leng##gmail.com
 *
 *  ---------- 接口說明： ----------
 *
 *  --本插件採用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("提示內容");