JS实现自定义弹出窗体,效果不好

 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');});
posted @ 2012-07-12 16:53  常伟华  阅读(291)  评论(0编辑  收藏  举报