Add the Alert,prompt method to jquery, similar to the system's alert,prompt, can respond to the keyboard, support drag

We call the system's alert,prompt pop-up prompt, different systems will have different cue boxes, visual effects are not uniform, and not good-looking, functional single, now we through the jquery simulation alert,prompt, the reality of unified visual effects, and rich content pop-up hints.

jquery can extend its capabilities, and it's easier to understand if someone unfamiliar with the jquery development plugin can go to the official web to see the document.

JS Code:

/* * This plugin is based on jquery * jquery version: 1.7.2 * date:2012-06-28 * *----------Interface Description:----------* *--this plugin uses the KW namespace to jquery adds a static method, so the calling method is $.kw. The method name parameter is as follows: *--Call Method: *--alert $.kw.alert (content,title,callback) *--prompt $.kw.prompt (t Itle,content,callback) * *--Title header name if default, the default title, such as: "System Prompt"--content content display *--callback callback function, click OK to perform the
 Content * *-Features: Similar system functions, support drag, response to keyboard events, ESC exit, enter OK, and callback function functions. * * */$ (function () {$.kw = {title: "System Information",///default title modifiable speed:400,//default speed modifiable Butto Nname: "OK",//OK button default name can modify Cancel: "Cancel",//Cancel button default name can modify content: "Content"//Remove masking layer Del:fun
		Ction () {$ ("#alert-layer"). Remove (); },//Response ESC keyboard to exit Esc:function () {$ (document). KeyUp (function (event) {if (Event.which = =) {$.kw.del
				();
		}
			});
			},//content display function 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);
				Remove the layer $ ("#alert-button"). Bind ("click", Function () {if (callBack) {callBack ();
				
			} $.kw.del (); });
		removing layer this.esc ();
			},//Hint 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 (); Get Focus this.move (); Drag $ ("#alert-close"). Bind ("click", This.del); Remove the layer $ ("#alert-cancel"). Bind ("click", This.del);
				Remove the layer $ ("#alert-button"). Bind ("click", Function () {$.kw.del ();
				if (callBack) {callBack ();
				
			}; });
		removing layer this.esc (); },//Box drag function 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)}); },//Set background layer with inner position setting:function () {var BCW = document.documentElement.clientWidth, BCH = document . documentelement.clientheight, BSH = document.documentElement.scrollHeight, aw = $ ("#alert-container"). Widt
			H ()/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 Code

#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 Code

$.kw.alert ("Prompt content") $.kw.alert ("Prompt content"
, "System Prompt")//Modify PopOver prompt title
$.kw.comport ("Prompt content");