jquery---点击弹出层

浏览数：21 / 时间：2015年06月09日

 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>