JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享 - Web前端

作者：98wpeu发布时间：2026-06-27分类：网页前端技术浏览：7

导读：多的不说了，直奔主题，分享一个放大效果的popupdialog，项目中可以根据自己的需求来写CSS，我打算复用到Metro风格的site上去。看起来动画效果还是比较cool的，...

多的不说了，直奔主题，分享一个放大效果的popup dialog，项目中可以根据自己的需求来写CSS，我打算复用到Metro风格的site上去。

看起来动画效果还是比较cool的，如果加上了处理后的效果更佳：
复制代码代码如下:
<htmlxmlns="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效果，如果不需要可以直接删掉。

标签：对话框效果 Web plugin jquery popup

上一篇：jquery控制左右箭头滚动图片列表的实例 - Web前端
下一篇：jquery高效反选具体实现 - Web前端

JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享 - Web前端

相关推荐