JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
人气:0
多的不说了，直奔主题，分享一个放大效果的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效果，如果不需要可以直接删掉。
看起来动画效果还是比较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效果，如果不需要可以直接删掉。
加载全部内容