JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享


Posted in Javascript onApril 28, 2013

多的不说了,直奔主题,分享一个放大效果的popup dialog,项目中可以根据自己的需求来写css,我打算复用到metro风格的site上去。

看起来动画效果还是比较cool的,如果加上了处理后的效果更佳:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> 
<style> 
body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; } 
ul li { background:#fff; margin:5px; width:100px; height:100px; float:left; } 
#transition { 
background:transparent; 
display:none; 
position:absolute; top:50%; left:50%; z-index:50; 
z-index: 10001; 
} 
#content { 
background:#fff; 
border:1px solid #666; 
margin:-50px 0 0 -50px; 
width:100px; height:100px; 
z-index: 10001; 
} 
#mask{ 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background-color: #000000; 
display: none; 
z-index: 10000; 
} 
.close 
{ 
width:30px; 
height:20px; 
background-color:Red; 
cursor:pointer; 
display:none; 
} 
.closeShow 
{ 
width:30px; 
height:20px; 
margin-left:50px; 
margin-top:-100px; 
background-color:Red; 
cursor:pointer; 
} 
</style> 
<script type="text/javascript"> 
$(document).ready(function () { 
$('ul li').click(function (e) { 
$("#mask").fadeTo(500, 0.25); 
$("#content").html("<div>Loading....</div>"); 
var $t = $('#transition'), 
to = $(this).offset(); 
var height = $(document).height(); 
var width = $(document).width(); 
$('#content').css({ width: 100, height: 100 }); 
$t.css({ 
top: to.top + 50, 
left: to.left + 50, 
display: 'block' 
}).animate({ 
top: height / 2, 
left: width / 2 
}, 600, function () { 
$(this).animate({ 
top: 125, 
left: 175 
}, 600); 
$('#content').animate({ 
width: width * 0.8, 
height: height * 0.8 
}, 600, function () { 
// open dialog here 
$("#content").html("<div>Hello, please put content here.</div>"); 
}); 
}); 
}); 
$('#transition').click(function (e) { 
$("#transition").hide(); 
$("#mask").hide(); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<ul> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
<li>thumb</li> 
</ul> 
<div id='mask'></div> 
<div id="transition"><div id="content">Loading....</div></div> 
</form> 
</body> 
</html>

加入了mask效果,如果不需要可以直接删掉。
Javascript 相关文章推荐
jquery 触发a链接点击事件解决方案
May 02 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
jquery实现图片切换代码
Oct 13 Javascript
Jquery-data的三种用法
Apr 18 jQuery
webpack 2的react开发配置实例代码
Jul 28 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 #Javascript
jquery在IE、FF浏览器的差别详细探讨
Apr 28 #Javascript
js自动下载文件到本地的实现代码
Apr 28 #Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 #Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 #Javascript
JQuery onload、ready概念介绍及使用方法
Apr 27 #Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 #Javascript
You might like
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
PHP读取目录下所有文件的代码
2008/01/07 PHP
php实现的发送带附件邮件类实例
2014/09/22 PHP
帝国cms常用标签汇总
2015/07/06 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
中国地区三级联动下拉菜单效果分析
2012/11/15 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
Python的Flask框架中集成CKeditor富文本编辑器的教程
2016/06/13 Python
Python中取整的几种方法小结
2017/01/06 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
python邮件发送smtplib使用详解
2020/06/16 Python
python版本五子棋的实现代码
2018/12/11 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python 动态绘制爱心的示例
2020/09/27 Python
汽车检测与维修个人求职信
2013/09/24 职场文书
历史专业个人求职信分享
2013/12/20 职场文书
优秀教师工作感言
2014/02/16 职场文书
《乞巧》教学反思
2014/02/27 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
2019年最新借条范本!
2019/07/08 职场文书
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android