基于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. Java虚拟机参数设置（转）

    今天在加载一幅图片时,eclipse报出如下错误: “Exception in thread "main" java.lang.OutOfMemoryError: Java hea ...

  2. log4j与commons-logging，slf4j的关系（转）

    前面有一篇日志中简单的介绍了 log4j,同时也介绍了它与commons-logging的关系,但是突然冒出来一个slf4j,并且slf4j有取代commons-logging的趋势,所以,我们可以推 ...

  3. 【软件project】生存期模型（含图）

    为了反映软件生存周期内各个工作应怎样组织,各阶段怎样衔接,须要软件开发模型给出直观图示表达.软件开发模型是软件思想的详细化,是实施在过程模块中的软件开发方法和工具. 以下来介绍开发模型的特点以及他们的 ...

  4. MySQL 服务器变量 数据操作DML-视图

    原文:MySQL 服务器变量 数据操作DML-视图 SQL语言的组成部分 常见分类: DDL:数据定义语言 DCL:数据控制语言,如授权 DML:数据操作语言 其它分类: 完整性定义语言: DDL的一 ...

  5. MySql创建一个存储过程

    MySQL 存储过程是从 MySQL 5.0 新功能.存储过程的长处有一箩筐.只是最基本的还是运行效率和SQL 代码封装. 特别是 SQL 代码封装功能,假设没有存储过程,在外部程序訪问数据库时(比如 ...

  6. Android APK反编译就这么简单 详细解释（简介）

    学习Android开发过程,你会向别人学习如何应用软件的开发,那些漂亮的动画和复杂的布局可能让你爱不释手,作为开发者.你可能真的想知道的是如何实现的界面效果.然后.您将能够更改应用程序APK反编译查看 ...

  7. 有意思的cmd命令

    1. Msconfig命令显示系统配置窗体,能够了解一些服务.启动相关的信息. 2.Gpedit.msc 命令显示本地组策略编辑器,能够设置用户登录时执行的程序. 3. Regedit 这个应该非常多 ...

  8. centos5.8本地安装yum资源，安装软件包

    首先 [root@mode media]# cd /etc/yum.repos.d/ [root@mode yum.repos.d]# ll total 16 -rw-r--r-- 1 root ro ...

  9. 第一个JavaWeb程序

    转载 第一个JavaWeb程序 JavaWeb学习总结第二篇—第一个JavaWeb程序 最近我在学院工作室学习并加入到研究生的项目中,在学长学姐的带领下,进入项目实践中,为该项目实现一个框架(用已有框 ...

  10. ThinkPHP 3.2 开放 cache注缓存，过滤非法字符

    打开缓存配置文件 /Application/Common/conf/cache.php源代码如下面: <?php return array( //'配置项'=>'配置值' 'LAYOUT_ ...