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动态加载图片数据练习代码
Aug 04 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
Javascript call和apply区别及使用方法
Nov 14 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
动态加载jQuery的方法
Jun 16 Javascript
js实现点击向下展开的下拉菜单效果代码
Sep 01 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
mustache.js实现首页元件动态渲染的示例代码
Dec 28 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 Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
PHP构造函数与析构函数用法示例
2016/09/28 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
PHP7实现和CryptoJS的AES加密方式互通示例【AES-128-ECB加密】
2019/06/08 PHP
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
2013/01/29 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
JQuery文本改变触发事件如聚焦事件、失焦事件
2014/01/15 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
JavaScript数组的栈方法与队列方法详解
2016/05/26 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
离线安装Pyecharts的步骤以及依赖包流程
2020/04/23 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
Python修改DBF文件指定列
2020/12/19 Python
python 获取计算机的网卡信息
2021/02/18 Python
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
laravel使用redis队列实例讲解
2021/03/23 PHP
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript