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