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 相关文章推荐
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
Aug 07 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
Jan 10 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
js 判断数据类型的几种方法
Jan 13 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
对vue生命周期的深入理解
Dec 03 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
PHP新手上路(八)
2006/10/09 PHP
php xml文件操作实现代码(二)
2009/03/20 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
豆瓣网的jquery代码实例
2008/06/15 Javascript
WEB 浏览器兼容 推荐收藏
2010/05/14 Javascript
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
jQuery给动态添加的元素绑定事件的方法
2015/03/09 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
详解数组Array.sort()排序的方法
2020/05/09 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
Vue自定义属性实例分析
2019/02/23 Javascript
python中__slots__用法实例
2015/06/04 Python
详解Python3中yield生成器的用法
2015/08/20 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python中数据爬虫requests库使用方法详解
2018/02/11 Python
Python变量类型知识点总结
2019/02/18 Python
python如何删除列为空的行
2020/07/17 Python
python GUI计算器的实现
2020/10/09 Python
python实现图片转字符画的完整代码
2021/02/21 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
好人好事演讲稿
2014/09/01 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
教学质量月活动总结
2015/05/11 职场文书
同学聚会感言一句话
2015/07/30 职场文书