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

Source: Internet
Author: User
Tags bind set background

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");


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.