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 <title>点击按钮弹出层效果</title> 5 <meta http-equiv="content-type" content="text/html;charset=gb2312"> 6 <style type="text/css"> 7 body,h2{margin:0;padding:0;} 8 #faqbg{background-color:#666666;position:absolute;z-index:99;left:0;top:0;display:none;width:100%;height:1000px;opacity:0.5;filter:alpha(opacity=50);-moz-opacity:0.5;} 9 #faqdiv{position:absolute;width:520px;left:50%;top:50%;margin-left:-200px;height:auto;z-index:100;background-color:#fff;border:1px #8FA4F5 solid;padding:1px;} 10 #faqdiv h2{height:25px;font-size:14px;background-color:#8FA4F5;position:relative;padding-left:10px;line-height:25px;} 11 #faqdiv h2 a{position:absolute;right:5px;font-size:12px;color:#FF0000;} 12 #faqdiv .form{padding:10px;width:500px;height:300px;overflow:auto;} 13 </style> 14 <script type="text/javascript" src="jquery-1.7.2.js"></script> 15 <script type="text/javascript"> 16 $(function(){ 17 $(".but").click(function(){ 18 var str = "展示的内容 "; 19 $(".form").html(str); 20 $("#faqbg").css({display:"block",height:$(document).height()}); 21 var yscroll =document.documentElement.scrollTop; 22 $("#faqdiv").css("top","100px"); 23 $("#faqdiv").css("display","block"); 24 document.documentElement.scrollTop=0; 25 }); 26 $(".close").click(function(){ 27 $("#faqbg").css("display","none"); 28 $("#faqdiv").css("display","none"); 29 }); 30 }) 31 </script> 32 </head> 33 <body> 34 <div id="faqbg"></div> 35 <div id="faqdiv" style="display:none"> 36 <h2>信息<a href="#" class="close">关闭</a></h2> 37 <div class="form">展示的内容</div> 38 </div> 39 <p> </p> 40 <p align="center"> 41 <a class="but">点击弹出</a> 42 </p> 43 </body> 44 </html>