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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
ie下$.getJSON出现问题的解决方法
Feb 12 Javascript
jquery选择器需要注意的问题
Nov 26 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
May 26 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
Vuex模块化应用实践示例
Feb 03 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中echo和print的区别
2014/08/28 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
childNodes.length与children.length的区别
2009/05/14 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
基于javascript实现页面加载loading效果
2020/09/15 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[02:17]《辉夜杯》TRG战队巡礼
2015/10/26 DOTA
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
Python 判断奇数偶数的方法
2018/12/20 Python
Python3.5内置模块之shelve模块、xml模块、configparser模块、hashlib、hmac模块用法分析
2019/04/27 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
Python 如何查找特定类型文件
2020/08/17 Python
HTML5对比HTML4的主要改变和改进总结
2016/05/27 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
Kathmandu新西兰官网:新西兰户外运动品牌
2019/07/27 全球购物
劳动竞赛活动方案
2014/02/20 职场文书
企业整改报告范文
2014/11/08 职场文书
同学聚会祝酒词
2015/08/10 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
详解MySQL事务的隔离级别与MVCC
2021/04/22 MySQL
浅谈Python 中的复数问题
2021/05/19 Python
python迷宫问题深度优先遍历实例
2021/06/20 Python