8QQ消息框


 1 <!DOCTYPE html>
 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></title>
 6     <style type="text/css">
 7         body {
 8             height: 1000px;
 9         }
10 
11         #msgQQ {
12             border: 1px solid #000;
13              300px;
14             height: 200px;
15             position: fixed; /**fixed是针对窗体布局，拉滚动条不会改变位置*/
16             right: 0px; /*坐标原点在右下角*/
17             bottom: 0px;
18             background-color: #0094ff;
19         }
20     </style>
21     <script src="Scripts/jquery-1.8.2.min.js"></script>
22     <script type="text/javascript">
23         $(function () {
24             $("#msgQQ").hide();
25             $("#showMsg").click(function () {
26                 $("#msgQQ").slideDown(2000, close);;
27             });
28         });
29         function close() {
30             //可以写字符串也可以写函数
31             // setTimeout('$("#msgQQ").slideUp();',2000);
32             setTimeout(function () { $("#msgQQ").slideUp(); }, 2000);
33         }
34     </script>
35 </head>
36 <body>
37     <img src="Images/orderedList8.png" />
38     <input type="button" value="显示消息" id="showMsg" />
39     <div id="msgQQ"></div>
40 </body>
41 </html>