基于Jquery 简单实用的弹出提示框

  

  引言:

    原生的 alert 样子看起来很粗暴,网上也有一大堆相关的插件,但是基本上都是大而全,仅仅几句话可以实现的东西,可能要引入好几十k的文件,所以话了点时间自己写了个弹出效果,放到项目上去发现效果还不错,这里贴出来,做个备忘,有需要的同学可以拿去,也可以作为一个参考。

 

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <title> 测试</title>
 5 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
 6 <style>
 7     /**
 8     样式如果自己觉得黑乎乎不好看可以修改
 9     **/
10     .ec_tip{
11         display:none;
12         padding:5px;
13         position: absolute; 
14         background: #555;
15         color:#fff;
16         border: 3px solid #555;
17         z-index: 9999; 
18     }
19 </style>
20 </head>
21 <body style="height:500px;">
22 </body>
23 <SCRIPT type="text/javascript">
24     //弹出提示效果
25     window.Alert = function(messages,callback){
26         if($(".ec_tip").length<1){
27             $("body").append("<div class=\"ec_tip\">"+messages+"</div>");
28         }
29         //定位居中显示
30         leftW = (document.body.clientWidth-$(".ec_tip").width())/2;
31         topH = (document.body.clientHeight-$(".ec_tip").height())/2;
32         $(".ec_tip").css("top", topH+"px").css("left", leftW+"px").fadeIn(2000);
33         //谈出效果并执行回调
34         $(".ec_tip").animate({top:"0px",opacity:0},2000,function(){
35             $(".ec_tip").remove();
36             if(callback!=undefined)
37                 callback();
38         });
39     }
    //Alert("世界你好,没有回调");
40 Alert("你好世界", function(){alert("回调提示")}); 41 </SCRIPT> 42 </html>

备注:js代码就这么简单的10来行,你也可以Alert改成 alert 直接重写了原生的alert方法。原生的alert 也不支持回调,这里同时支持原生的基础上加入回调函数。应该还不错哦!!

基于Jquery 简单实用的弹出提示框,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。