脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-基于Jquery 简单实用的弹出提示框，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 引言：
原生的 alert 样子看起来很粗暴，网上也有一大堆相关的插件，但是基本上都是大而全，仅仅几句话可以实现的东西，可能要引入好几十k的文件，所以话了点时间自己写了个弹出效果，放到项目上去发现效果还不错，这里贴出来，做个备忘，有需要的同学可以拿去，也可以作为一个参考。
复制代码
1 <!DOCTYPE HTML PubLIC "-//W3C//DTD HTML 4.01 TransITional//EN" "https://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <title> 测试</title>
5 <script type="text/javascript" src="https://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("<p class=/"ec_tip/">"+messages+"</p>");
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 也不支持回调，这里同时支持原生的基础上加入回调函数。应该还不错哦！！
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-基于Jquery 简单实用的弹出提示框全部内容，希望文章能够帮你解决javascript代码实例教程-基于Jquery 简单实用的弹出提示框所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。