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 相关文章推荐
转换字符串为json对象的方法详解
Nov 29 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
理解Javascript图片预加载
Feb 23 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
js实现产品缩略图效果
Mar 10 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
浅谈express.js框架中间件(middleware)
Apr 07 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 Javascript
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
一周学会PHP(视频)Http下载
2006/12/12 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
PHP SESSION的增加、删除、修改、查看操作
2015/03/20 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
jQuery 关于伪类选择符的使用说明
2013/04/24 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
浅析vue深复制
2018/01/29 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
使用JS实现导航切换时高亮显示的示例讲解
2018/08/22 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python 正则式 概述及常用字符
2009/05/07 Python
利用python获得时间的实例说明
2013/03/25 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
美国男女折扣服饰百货连锁店:Stein Mart
2017/05/02 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
PHP面试题集
2016/12/18 面试题
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
应届生简历中的自我评价
2014/01/13 职场文书
五年级语文教学反思
2014/01/30 职场文书
满月酒主持词
2014/03/27 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
党建目标管理责任书
2014/07/25 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书