基于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 简单实用的弹出提示框的更多相关文章

  1. 基于jQuery鼠标点击弹出登陆框效果

    基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type=" ...

  2. 一款基于jquery超炫的弹出层提示消息

    今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  3. jquery删除记录弹出提示框

    来自于<jquery权威指南> ------------------- 点击删除时,弹出提示框,并做相应的删除确定或取消 完整代码如下: <!DOCTYPE html PUBLIC ...

  4. jQuery - 选中复选框则弹出提示框

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果

    需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果,  总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...

  6. android标题栏下面弹出提示框(一) TextView实现,带动画效果

    产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...

  7. PHP弹出提示框并跳转到新页面即重定向到新页面

    本文为大家介绍下使用PHP弹出提示框并跳转到新页面,也就是大家所认为的重定向,下面的示例大家可以参考下   这两天写一个demo,需要用到提示并跳转,主要页面要求不高,觉得没必要使用AJAX,JS等, ...

  8. [转] 在Asp.net前台和后台弹出提示框

    一.在前台弹出提示框 1.点击"A"标记或者"控件按钮"弹出提示框 <asp:LinkButton ID="lbtnDel" runa ...

  9. SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ，弹出提示框

    1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...

随机推荐

  1. 浅谈SQL注入风险 - 一个Login拿下Server(转)

    前两天,带着学生们学习了简单的ASP.NET MVC,通过ADO.NET方式连接数据库,实现增删改查. 可能有一部分学生提前预习过,在我写登录SQL的时候,他们鄙视我说:“老师你这SQL有注入,随便都 ...

  2. [Android 4.4.3] 泛泰A870 Mokee4.4.3 20140610 RC2.0 通过刷第三版 by syhost

    欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam  (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...

  3. MVC中，视图的Layout使用

    本文目标 1.能够重用Razor模板进行页面的组件化搭建 本文目录 1.母板页_Layout.cshtml 2.用户自定义控件 3.默认Layout引用的使用(_ViewStart.cshtml) 1 ...

  4. Oracle 指数 一个简短的引论

    1 索引创建语法: CREATE UNIUQE | BITMAP INDEX <schema>.<index_name>       ON <schema>.< ...

  5. iWatch # 初始化工程

    iWatch --利用swift,开发iWatch手表小应用! 远程仓库,团队开发: $ git init $ git add . $ git commit -m “ProjectName” // p ...

  6. angularJS之使用指令封装DOM操作

    angularJS之使用指令封装DOM操作 创建指令 指令也是一种服务,只是这种服务的定义有几个特殊要求: 必须使用模块的directive()方法注册服务 必须以对象工厂/factory()方法定义 ...

  7. C++外观设计模式模式(三)

    3.外观模式总结 引入了外观类.解除了客户类与子系统的耦合性.客户类不须要直接操作子系统,而是由外观类负责处理,对client而言是透明的,客户类仅仅须要操作外观类就能够了,符合"迪迷特法则 ...

  8. EasyUI基础知识Draggable(拖累)

    学习前easyui基于解析器,装载机.对他们来说,入门阶段,我们只需要在一个简单的理解.第一阶段,不宜过深后,.接着,根据easyui订购的文件正在研究安排官方网站Draggable插入. Dragg ...

  9. 湘潭oj1203/邀请赛A称号 数论+java睑板

    乞讨 n%1+n%2+n%3+n%4+.........n%n=,n<=10^12次要. 一味的找规律之初.没有发现.后来,前辈执教后,人才平淡,所以,现在唯一明确的. 首先在地图上: 对于该题 ...

  10. CreateMutex

    C++ API CreateMutex 找出当前系统是否已经存在指定进程的实例.假设没有则创建一个相互排斥体.CreateMutex()函数可用来创建一个有名或无名的相互排斥量对象. HANDLE C ...