首页 > 代码库 > 基于Jquery 简单实用的弹出提示框
基于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 也不支持回调,这里同时支持原生的基础上加入回调函数。应该还不错哦!!
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。