基于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基础课程----select详解

    准备 在正式开始本内容之前,需要先从github下载相关代码,搭建好一个名为mysql_shiyan的数据库(有三张表:department,employee,project),并向其中插入数据. 具 ...

  2. nginx.conf 完整的集群配置

    ###############################nginx.conf 整配置############################### #user nobody; # user 主模 ...

  3. HTML5使用和实战分析HTML5 WebSocket API

    通过引入一个简单的界面(请参见下面的列表),开发替代技术,由于长轮询和"永远框架,从而进一步减少延迟. 后台代码 [Constructor(in DOMString url, optiona ...

  4. PHP课程十大 PHP图像处理功能和实现的验证码

    假如你喜欢这个博客,访问这个博客地址:http://blog.csdn.net/junzaivip 总结: gd绘图库: 数学函数 PHP图片处理函数 图片处理函数使用场景 1.验证码 2.缩放 3. ...

  5. Oracle表空间及分区表

    (1) 表空间及分区表的概念表空间: 是一个或多个数据文件的集合,所有的数据对象都存放在指定的表空间中,但主要存放的是表, 所以称作表空间.分区表: 当表中的数据量不断增大,查询数据的速度就会变慢,应 ...

  6. MVC自定义配置

    ASP.NET 5 入门 (2) – 自定义配置 ASP.NET 5 理解和入门 建立和开发ASP.NET 5 项目 初步理解ASP.NET5的配置 正如我的第一篇文章ASP.NET 5 (vNext ...

  7. ASP.NET 5简介

    ASP.NET 5简介 解读ASP.NET 5 & MVC6系列(1):ASP.NET 5简介 2015-05-13 09:14 by 汤姆大叔, 3379 阅读, 39 评论, 收藏, 编辑 ...

  8. crawler_java_数据平台结构

    大数据生态架构

  9. oracle_job 清空冗余数据 ，每一分钟执行一次

    参照这个例子:http://cherryqq.iteye.com/blog/855022 思路: data表中有4条数据 ,relation有3条数据,通过data_id 对应,需要定时删除 data ...

  10. C#二维码生成与解码

    [窗体效果图] [程序源代码] using System; using System.Collections.Generic; using System.ComponentModel; using S ...