摘要:代码如下:<html xmlns="https://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("<p>Loading....</p>"); 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("<p>Hello, please put content here.</p>"); }); }); }); $('#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> <p id='mask'></p> <p id="transition"><p id="content">Loading....</p></p> </form> </body> </html>

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

代码如下:

<html xmlns="https://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("<p>Loading....</p>");
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("<p>Hello, please put content here.</p>");
});
});
});
$('#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>
<p id='mask'></p>
<p id="transition"><p id="content">Loading....</p></p>
</form>
</body>
</html>

加入了mask效果,如果不需要可以直接删掉。

代码如下:

<html xmlns="https://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("<p>Loading....</p>");
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("<p>Hello, please put content here.</p>");
});
});
});
$('#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>
<p id='mask'></p>
<p id="transition"><p id="content">Loading....</p></p>
</form>
</body>
</html>

加入了mask效果,如果不需要可以直接删掉。

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享

全部内容,希望文章能够帮你解决

js实例教程-JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过