多的不说了,直奔主题,分享一个放大效果的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; 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; 100px; height:100px; z-index: 10001; } #mask{ position: absolute; top: 0; left: 0; 100%; height: 100%; background-color: #000000; display: none; z-index: 10000; } .close { 30px; height:20px; background-color:Red; cursor:pointer; display:none; } .closeShow { 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({ 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 * 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效果,如果不需要可以直接删掉。
效果截图:
http://my.csdn.net/my/album/detail/1640243