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 相关文章推荐
鼠标划过实现延迟加载并隐藏层的js代码
Oct 11 Javascript
javascript中拼接HTML字符串的最快、最好的方法
Jun 07 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
JS原型链怎么理解
Jun 27 Javascript
js+css3实现旋转效果
Jan 20 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
vue自定义移动端touch事件之点击、滑动、长按事件
Jul 10 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
js动画(animate)简单引擎代码示例
2012/12/04 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
2014/06/30 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
2015/12/25 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
2017/12/21 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
浅谈javascript中的prototype和__proto__的理解
2019/04/07 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
python 2.7.14安装图文教程
2018/04/08 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
python异常处理try except过程解析
2020/02/03 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
如何基于pandas读取csv后合并两个股票
2020/09/25 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
2014年应届大学生自我评价
2014/01/09 职场文书
触摸春天教学反思
2014/02/03 职场文书
委托证明书
2014/09/17 职场文书
个人道歉信大全
2019/04/11 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
聊聊Python String型列表求最值的问题
2022/01/18 Python
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server