首页 > 代码库 > 给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动

给Jquery添加alert,prompt方法,类似系统的Alert,Prompt,可以响应键盘,支持拖动

我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容丰富的弹出提示。

 

Jquery可以扩展自己的功能,如果对Jquery开发插件不熟悉的人可以到官方网去看看文档,比较简单易懂。

 

 

 

Js代码  收藏代码
  1. /* 
  2.  *  本插件基于JQUERY 
  3.  *  Jquery版本: 1.7.2 
  4.  *        Date:2012-06-28 
  5.  *      Author:Kingwell 
  6.  *      E-mail:jinhua.leng##gmail.com 
  7.  * 
  8.  *  ---------- 接口说明: ---------- 
  9.  * 
  10.  *  --本插件采用kw命名空间,给Jquery添加静态方法,故调用方法为  $.kw.方法名 参数如下: 
  11.  *  --调用方法: 
  12.  *  --alert  $.kw.alert(content,title,callBack) 
  13.  *  --prompt $.kw.prompt(title,content,callBack) 
  14.  * 
  15.  * 
  16.  *  --   title 标题名称 如果缺省,则为默认标题,如:"系统提示" 
  17.  *  -- content 内容显示的内容 
  18.  *  --callback 回调函数,单击确定后要执行的内容 
  19.  * 
  20.  * 
  21.  *  --功能:类似系统功能,支持拖动,响应键盘事件,ESC退出,Enter确定,以及回调函数功能。 
  22.  * 
  23.  * 
  24.  */  
  25. $(function () {  
  26.   
  27.     $.kw = {  
  28.         title      : "System information"//默认标题 可修改  
  29.         speed      : 400, //默认速度 可修改  
  30.         buttonName : "OK"//确定按钮默认名称 可修改  
  31.         cancel     : "Cancel"//取消按钮默认名称 可修改  
  32.         content    : "Content",  
  33.       
  34.           
  35.          //移除遮盖层  
  36.         del : function () {  
  37.             $("#alert-layer").remove();  
  38.         },  
  39.         //响应ESC键盘退出  
  40.         esc : function () {   
  41.             $(document).keyup(function (event) {  
  42.                 if (event.which == 27) {  
  43.                     $.kw.del();  
  44.                 }  
  45.             });  
  46.         },  
  47.   
  48.   
  49.         //内容显示功能  
  50.         alert : function (sContent, sTitle, callBack) {  
  51.             var title = sTitle || this.title;  
  52.             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>";  
  53.               
  54.             $(layer).fadeIn(this.speed).appendTo("body");  
  55.             this.setting();  
  56.             this.move();  
  57.             $("#alert-button").focus();  
  58.             $("#alert-close").bind("click"this.del); //移除层  
  59.             $("#alert-button").bind("click"function () {  
  60.                 if (callBack) {  
  61.                     callBack();  
  62.                 }  
  63.                 $.kw.del();  
  64.                   
  65.             }); //移除层  
  66.             this.esc();  
  67.         },  
  68.           
  69.           
  70.           
  71.         //提示  
  72.         confirm : function (sContent, callBack, sTitle) {  
  73.             var title = sTitle || this.title;  
  74.             var content = sContent || this.content;  
  75.             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>";  
  76.               
  77.             $(layer).fadeIn(this.speed).appendTo("body");  
  78.             this.setting();  
  79.             $("#alert-button").focus(); //获得焦点  
  80.             this.move(); //拖动  
  81.             $("#alert-close").bind("click"this.del); //移除层  
  82.             $("#alert-cancel").bind("click"this.del); //移除层  
  83.             $("#alert-button").bind("click"function () {  
  84.                 $.kw.del();  
  85.                 if (callBack) {  
  86.                     callBack();  
  87.                 };  
  88.                   
  89.             }); //移除层  
  90.             this.esc();  
  91.         },        
  92.           
  93.           
  94.         //框拖动功能  
  95.         move : function () {  
  96.             $("#alert-title").mousedown(function (event) {  
  97.                 var l = parseInt($("#alert-container").css("left")),  
  98.                 t = parseInt($("#alert-container").css("top"));  
  99.                 x = event.pageX - l;  
  100.                 y = event.pageY - t;  
  101.                 $("body").bind("mousemove"function (event) {  
  102.                     $("#alert-container").css({  
  103.                         "left" : (event.pageX - x)  
  104.                     });  
  105.                     $("#alert-container").css({  
  106.                         "top" : (event.pageY - y)  
  107.                     });  
  108.                     //$("#alert-container").fadeTo(0,0.9)  
  109.                 });  
  110.             });  
  111.             $("body").mouseup(function () {  
  112.                 $("body").unbind("mousemove");  
  113.                 //$("#alert-container").fadeTo(0,1)  
  114.             });  
  115.               
  116.         },  
  117.           
  118.       
  119.         //设置背景层与内位置  
  120.         setting : function () {  
  121.             var bcw = document.documentElement.clientWidth,  
  122.                 bch = document.documentElement.clientHeight,  
  123.                 bsh = document.documentElement.scrollHeight,  
  124.                 aw  = $("#alert-container").width() / 2,  
  125.                 ah  = $("#alert-container").height() / 2;  
  126.             $("#alert-layer").css("height", bsh);  
  127.             $("#alert-container").css({  
  128.                 "top"  : bch / 2 - ah,  
  129.                 "left" : bcw / 2 - aw  
  130.             });  
  131.         }  
  132.           
  133.           
  134.     //$.kw  End   
  135.     };  
  136.   
  137.   
  138. });  

 

Css代码  收藏代码
  1. #alert-layer button:focus{border:1px solid #AAA!important; background:#789!important; color:white; outline:none}  
  2. #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)}  
  3. #alert-layer #alert-container{border-radius:3px; padding:10px; width:390px; position:fixed; _position:absolute;}  
  4. #alert-layer .alert-top{background:url(images/conner2.png) no-repeat left top; height:10px;}  
  5. #alert-layer .alert-bottom{background:url(images/conner2.png) no-repeat left bottom; height:10px;}  
  6. #alert-layer #alert-title{font-size:15px; height:30px;line-height:25px;padding:0 10px;position:relative;font-weight:bold;cursor:move;}  
  7. #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;}  
  8. #alert-layer .alert-button{ padding:5px 10px; text-align:right}  
  9. #alert-layer #alert-content{background:#F1F1F1; border-top:1px solid #B9B9B9; border-bottom:1px solid #B9B9B9; padding:10px 15px;}  
  10. .alert-box{background:url(images/tc_bg.png) repeat-y left top; padding:0 6px}  
  11.   
  12. #alert-layer button{padding:5px; border:1px solid #CCC; margin:auto 5px; border-radius:2px; min-width:60px;}  
  13. #alert-layer h1,#alert-layer h2,#alert-layer h3,#alert-layer h4{margin:10px auto; font-size:16px}  

 

 

调用方法:

 

Js代码  收藏代码
  1. $.kw.alert("提示内容")  
  2. $.kw.alert("提示内容","系统提示")//修改弹出框提示标题  
  3.   
  4. $.kw.comport("提示内容");  

 

 

 

 

<iframe id="google_ads_frame2" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1401462769&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Franran%2Fp%2F3761497.html&dt=1401462770814&shv=r20140520&cbv=r20140417&saldr=sb&correlator=1401462770658&frm=20&ga_vid=1304086684.1400769066&ga_sid=1401446522&ga_hid=125958871&ga_fc=1&u_tz=480&u_his=710&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=verdana&dfs=13&adx=0&ady=4017&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=2&xpc=4WSJJYmmOv&p=http%3A//www.cnblogs.com&dtd=47" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame2" marginWidth="0" scrolling="no" hspace="0"></iframe><iframe id="google_ads_frame3" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1401462769&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Franran%2Fp%2F3761497.html&dt=1401462770868&shv=r20140520&cbv=r20140417&saldr=sb&prev_slotnames=8660799060&correlator=1401462770658&frm=20&ga_vid=1304086684.1400769066&ga_sid=1401446522&ga_hid=125958871&ga_fc=1&u_tz=480&u_his=710&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=verdana&dfs=13&adx=305&ady=4267&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=3&xpc=NzAuAiF938&p=http%3A//www.cnblogs.com&dtd=47" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame3" marginWidth="0" scrolling="no" hspace="0"></iframe>