基于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. 使用批处理文件命令行方式快速启动和停止IIS、SqlServer

    原文:使用批处理文件命令行方式快速启动和停止IIS.SqlServer 虽然现在内存便宜了,但是自己还是嫌自己的512M内存太小,没办法,后台运行的东西太多了,有很多都是有用的没法关闭的.IIS和SQ ...

  2. springMVC框架建设进程

    1.创建Dynamic Web Project 2.导入spring和springmvc所须要的文件 3.配置web.xml文件 3.1 监听spring上下文容器 3.2 载入spring的xml文 ...

  3. Oracle安装及使用入门

    新手Oracle安装及使用入门   一．安装Oracle Step1 下载oracle压缩包并解压到同一文件夹下面 Step2 双击setup.exe进行安装 Step3:进入如下界面配置: 邮箱可不 ...

  4. 如何使用Ubuntu打电话

    在这个视频,我们学习如何使用Ubuntu打电话.Ubuntu手机的很多用户谁是不是很熟悉. 特别是,他什么都无所谓的物理按键(菜单键.home纽带.回车键).然后用户如何控制手机它?Ubuntu手机凭 ...

  5. DynamicReports 导出Excel 例子

    import java.awt.Color; import java.io.FileOutputStream; import java.util.ArrayList; import java.util ...

  6. Java数据结构系列——简单排序：泡、选择、直接进入

    package SimpleSort; public class SimpleSort { /** * 冒泡排序:每次循环过程中.小的排在后面的数会像水中的 * 气泡一样慢慢往上冒,所以命名为冒泡排序 ...

  7. hive 的分隔符、orderby sort by distribute by的优化

    一.Hive 分号字符 分号是SQL语句结束标记,在HiveQL中也是,可是在HiveQL中,对分号的识别没有那么智慧,比如: select concat(cookie_id,concat(';',' ...

  8. C#操作Xml：如何定义Xsd文件

    Xml Schema的用途 1． 定义一个Xml文档中都有什么元素 2． 定义一个Xml文档中都会有什么属性 3． 定义某个节点的都有什么样的子节点,可以有多少个子节点,子节点出现的顺序 4． 定义元 ...

  9. HDU 4005 The war （图论-tarjan）

    The war Problem Description In the war, the intelligence about the enemy is very important. Now, our ...

  10. SpringMVC1

    itRed You are never too old to set another goal or to dream a new dream. SpringMVC一路总结(一) SpringMVC听 ...