基于Jquery 简单实用的弹出提示框
基于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 简单实用的弹出提示框的更多相关文章
- 基于jQuery鼠标点击弹出登陆框效果
基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <input type=" ...
- 一款基于jquery超炫的弹出层提示消息
今天给大家带来一款基于jquery超炫的弹出层提示消息.这款实例页面初始时,一个go按钮.当单击go按钮时,提示强出层以动画形式出现.效果图如下: 在线预览 源码下载 实现的代码. html代码: ...
- jquery删除记录弹出提示框
来自于<jquery权威指南> ------------------- 点击删除时,弹出提示框,并做相应的删除确定或取消 完整代码如下: <!DOCTYPE html PUBLIC ...
- jQuery - 选中复选框则弹出提示框
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- android标题栏上面弹出提示框(二) PopupWindow实现,带动画效果
需求:上次用TextView写了一个从标题栏下面弹出的提示框.android标题栏下面弹出提示框(一) TextView实现,带动画效果, 总在找事情做的产品经理又提出了奇葩的需求.之前在通知栏显示 ...
- android标题栏下面弹出提示框(一) TextView实现,带动画效果
产品经理用的是ios手机,于是android就走上了模仿的道路.做这个东西也走了一些弯路,写一篇博客放在这里,以后自己也可用参考,也方便别人学习. 弯路: 1.刚开始本来用PopupWindow去实现 ...
- PHP弹出提示框并跳转到新页面即重定向到新页面
本文为大家介绍下使用PHP弹出提示框并跳转到新页面,也就是大家所认为的重定向,下面的示例大家可以参考下 这两天写一个demo,需要用到提示并跳转,主要页面要求不高,觉得没必要使用AJAX,JS等, ...
- [转] 在Asp.net前台和后台弹出提示框
一.在前台弹出提示框 1.点击"A"标记或者"控件按钮"弹出提示框 <asp:LinkButton ID="lbtnDel" runa ...
- SilverLight 页面后台方法XX.xaml.cs 创建JS,调用JS ,弹出提示框
1.Invoke和InvokeSelf [c-sharp] view plaincopy public partial class CreateJSDemo : UserControl { publi ...
随机推荐
- 构造activeMQ
一.添加下列库 而配置的路径 ws2_32.lib;Mswsock.lib;cppunit.lib;libapr-1.lib;libapriconv-1.lib;libaprutil-1.lib;li ...
- Matlab中调用第三方Java代码
搞了一天,才算搞定. 第一步:定位Matlab中Java环境的ext目录 新建一个M script文件,或者直接在Matlab的交互式命令行中输入: disp(java.lang.System.get ...
- jquery初步总结
1.$(document).ready()方法和window.onload差分法 为页元件的正确操作,我们需要把操作元件JS编写的代码$(document).ready()(Jquery)或windo ...
- PowerDesigner教程
PowerDesigner是一款功能很强大的建模工具软件,足以与Rose比肩,相同是当今最著名的建模软件之中的一个.Rose是专攻UML对象模型的建模工具,之后才向数据库建模发展,而PowerDesi ...
- JQuery插件开发初探——图片轮播
在熟悉了插件开发的结构以后,自己尝试着做了一个稍微复杂一点的小功能:图片轮播插件. 由于之前使用的一款图片轮播插件,性能不高,页面加载的时候需要载入全部的图片,因此速度很慢. 通过自己做这个小插件,能 ...
- Android fragment onActivityResult 不起作用
fragment 跳转至Acivity后,fragment里面的onActivityResult 被被调用 试过非常多办法,最后getactivity().startactivityforresult ...
- Git 1.9.5.msysgit.1
Git 1.9.5.msysgit.1 发布,现已提供下载:https://github.com/msysgit/git/archive/v1.9.5.msysgit.1.zip. Git是一个开源的 ...
- Spark操作hbase
于Spark它是一个计算框架,于Spark环境,不仅支持单个文件操作,HDFS档,同时也可以使用Spark对Hbase操作. 从企业的数据源HBase取出.这涉及阅读hbase数据,在本文中尽快为了尽 ...
- android EditText问题多行文本输入
一旦习惯了网络和swing在文本框输入,我们Android突然缺乏这样的管制,刚开始使用它是相当费力.为了要实现多行文本输入框和显示.逐一克服这些问题,如下面: 1. 怎么做EditText显示区域在 ...
- 矿Mac必备软件
1.Svn工具: Cornerstone_v2.7.10 2.iPhone配置文件管理 iPhoneConfigUtility.dmg 3.有道 for mac http://cidian.youda ...