基于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. SAP RFC 函数来创建 Java呼叫 学习总结 一步一步的插图

    前言 该公司很快就接到了一个项目,SAP有接口.让我们做老大SAP.首先SAP联系.但发展从来没有打过.本周集中在这一个研究. 各种碰壁,SAP该系统让我怎么说? 算了.说多了都是泪,以下附上本周学习 ...

  2. Nagios显示器MySQL一个错误：NRPE: Unable to read output具体的解决过程

    前言:nagios介面.见监测mysql服务错误,如下面: Warning:NRPE: Unable to read output 1,跟nagios显示器server上check下 1.1.运行ch ...

  3. javascript、jQuery的扩展方法，扩展实例展示代码

    $(function () {    var total = 0, height = $(window).height(), memberScroll, cartScroll, proScroll;  ...

  4. C#关于HttpClient的应用（二）：融云IM集成

    public class RcHttpClient:BaseHttpClient { private String appKey; private String appSecret; public R ...

  5. JavaEE Tutorials (1) - 概述

    1.1 Java EE 7平台新增特性3 1.2 Java EE应用模型3 1.3 分布式多层应用4 1.3.1 安全4 1.3.2 Java EE组件5 1.3.3 Java EE客户端6 1.3. ...

  6. Log4j2 简明教程

    一.概述 log4j2官方文档内容非常多,要一次性了解全部是不可能的.正确的步骤应当是先了解最常见的配置,当发现原有知识无法解决问题,再重新查看文档看有没有合适的配置.下面将从文件结构入手,再到简单的 ...

  7. Swift中文教程(一)--欢迎来到Swift的世界

    原文:Swift中文教程(一)--欢迎来到Swift的世界 Apple凌晨时在WWDC发布了Swift编程语言,语法简介我很喜欢,市面上没有完整的中文教程,我在ibooks里面下载了英文原版,现在开始 ...

  8. Asp.net MVC + EF + Spring.Net 项目实践（目录）

    用4篇博客来搭一个MVC的框架,可能对初学者会有一些帮助,大家共勉吧.我觉得对于中小型项目,这个框架可能还是有一定的用处的,希望能够帮助到一些人. Asp.net MVC + EF + Spring. ...

  9. 使用C/C++发展Web系统开源

    下载 见 C++开发的论坛系统 - BBS 下载地址:Fetch_source_code_release_vse2008_v1.2.1.7z 眼下先暂存在百度云上,最近会放入github 当前版本号的 ...

  10. Android adb端口转发调试助手Packet Sender

    相信大家做过安卓开发或者安卓自动化测试开发的都离不开adb这个Android Debug Bridge这个工具,该工具有个很重要的功能就是端口转发.比如你在目标安卓机器端建立了一个服务来处理获取当前界 ...