1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery测试</title> 6 <style type="text/css"> 7 * 8 { 9 padding:0; 10 margin:0; 11 } 12 #msg 13 { 14 background-color:#E8E8E8; 15 display:none; 16 z-index:25; 17 width:350px; 18 height:200px; 19 position:absolute; 20 margin:0px; 21 padding:0px; 22 border:solid 2px #EEEEEE; 23 } 24 .msg_title 25 { 26 visibility:hidden; 27 width:100%; 28 height:30px; 29 vertical-align:middle; 30 } 31 .msg_content 32 { 33 //background-color:#E8E8E8; 34 width:100%; 35 height:100%; 36 } 37 .msg_title_action 38 { 39 float:right; 40 } 41 .msg_title_desc 42 { 43 float:left 44 } 45 </style> 46 <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 47 <script type="text/javascript"> 48 $(function(){ 49 50 //消息的主题层 51 $('#btnShowMsg').bind('click',function(){ 52 var winHeight = $(window).height(); //浏览器当前窗口可视区域高度 53 var winWidth = $(window).width(); //浏览器当前窗口可视区域宽度 54 var msgWidth = $('#msg').width(); 55 var msgHeight = $('#msg').height(); 56 $('#msg').offset({top:(winHeight - msgHeight) / 2,left:(winWidth - msgWidth) / 2}).show('slow').hover(function(){$('.msg_title').css('visibility','visible');},function(){$('.msg_title').css('visibility','hidden');}); 57 }); 58 59 //淡出 60 $('#msg_close').click(function(){ 61 $('#msg').fadeOut('slow'); 62 }); 63 64 //最小化按钮 65 $('#msg_minimize').toggle(function(){ 66 $('.msg_content').hide('fast'); 67 $('#msg').css({height:30}); 68 $(this).val('还原'); 69 },function(){ 70 $('.msg_content').show('fast'); 71 $('#msg').css({height:200}); 72 $(this).val('最小化'); 73 }); 74 75 }); 76 </script> 77 78 </head> 79 80 <body> 81 123123123123123<br /> 82 123123123123123<br /> 83 123123123123123<br /> 84 123123123123123<br /> 85 <hr /> 86 <input type="button" id="btnShowMsg" value="点击我，查看图层" /> 87 <div id="msg"> 88 <div class="msg_title"> 89 <div class="msg_title_desc"></div> 90 <div class="msg_title_action"> 91 <input id="msg_minimize" type="button" value="最小化" /> | <input id="msg_close" type="button" value="关闭" /> 92 </div> 93 </div> 94 <div class="msg_content"> 95 测试内容 96 </div> 97 </div> 98 </body> 99 </html>
发现有些小问题，关于jquery的offset函数，可能是不了解，使用的不当，现在更正代码
1 $('#msg').css({'position':'absolute','top':h,'left':w}).show('slow',function(){}).hover(function(){$('.msg_title').css('visibility','visible');},function(){$('.msg_title').css('visibility','hidden');});