当前位置:Gxlcms > JavaScript > JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享

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

时间:2021-07-01 10:21:17 帮助过:6人阅读

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

看起来动画效果还是比较cool的,如果加上了处理后的效果更佳:
代码如下:
  1. <br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head runat="server"> <br><title></title> <br><script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <br><style> <br>body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; } <br>ul li { background:#fff; margin:5px; width:100px; height:100px; float:left; } <br>#transition { <br>background:transparent; <br>display:none; <br>position:absolute; top:50%; left:50%; z-index:50; <br>z-index: 10001; <br>} <br>#content { <br>background:#fff; <br>border:1px solid #666; <br>margin:-50px 0 0 -50px; <br>width:100px; height:100px; <br>z-index: 10001; <br>} <br>#mask{ <br>position: absolute; <br>top: 0; <br>left: 0; <br>width: 100%; <br>height: 100%; <br>background-color: #000000; <br>display: none; <br>z-index: 10000; <br>} <br>.close <br>{ <br>width:30px; <br>height:20px; <br>background-color:Red; <br>cursor:pointer; <br>display:none; <br>} <br>.closeShow <br>{ <br>width:30px; <br>height:20px; <br>margin-left:50px; <br>margin-top:-100px; <br>background-color:Red; <br>cursor:pointer; <br>} <br></style> <br><script type="text/javascript"> <br>$(document).ready(function () { <br>$('ul li').click(function (e) { <br>$("#mask").fadeTo(500, 0.25); <br>$("#content").html("<div>Loading....</div>"); <br>var $t = $('#transition'), <br>to = $(this).offset(); <br>var height = $(document).height(); <br>var width = $(document).width(); <br>$('#content').css({ width: 100, height: 100 }); <br>$t.css({ <br>top: to.top + 50, <br>left: to.left + 50, <br>display: 'block' <br>}).animate({ <br>top: height / 2, <br>left: width / 2 <br>}, 600, function () { <br>$(this).animate({ <br>top: 125, <br>left: 175 <br>}, 600); <br>$('#content').animate({ <br>width: width * 0.8, <br>height: height * 0.8 <br>}, 600, function () { <br>// open dialog here <br>$("#content").html("<div>Hello, please put content here.</div>"); <br>}); <br>}); <br>}); <br>$('#transition').click(function (e) { <br>$("#transition").hide(); <br>$("#mask").hide(); <br>}); <br>}); <br></script> <br></head> <br><body> <br><form id="form1" runat="server"> <br><ul> <br><li>thumb</li> <br><li>thumb</li> <br><li>thumb</li> <br><li>thumb</li> <br><li>thumb</li> <br><li>thumb</li> <br><li>thumb</li> <br><li>thumb</li> <br><li>thumb</li> <br></ul> <br><div id='mask'></div> <br><div id="transition"><div id="content">Loading....</div></div> <br></form> <br></body> <br></html> <br> <br>加入了mask效果,如果不需要可以直接删掉。

人气教程排行