javascript实现的右下角弹窗实例

这篇文章主要介绍了javascript实现的右下角弹窗,实例分析了javascript实现右下角弹窗的完整实现步骤与技巧,需要的朋友可以参考下

本文实例讲述了javascript实现的右下角弹窗的方法。分享给大家供大家参考。具体如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
6. <title>右下角的弹窗</title> 
7. <style type="text/css"> 
8. body { background:#333333;} 
9. #winpop { 
10. width:200px; height:0px;  
11. position:absolute; right:0; bottom:0; 
12. border:1px solid #999999; margin:0; padding:1px; 
13. overflow:hidden; display:none; background:#FFFFFF 
14. } 
15. #winpop .title { 
16. width:100%; height:20px; 
17. line-height:20px; background:#FFCC00; 
18. font-weight:bold; text-align:center; 
19. font-size:12px; 
20. } 
21. #winpop .con { 
22. width:100%; height:80px; 
23. line-height:80px; font-weight:bold; 
24. font-size:12px; color:#FF0000; 
25. text-decoration:underline; text-align:center 
26. } 
27. #silu { 
28. font-size:13px; color:#999999; 
29. position:absolute; right:0; 
30. text-align:right; text-decoration:underline; 
31. line-height:22px; 
32. } 
33. .close { 
34. position:absolute; right:4px; top:-1px; 
35. color:#FFFFFF; cursor:pointer 
36. } 
37. </style> 
38. <script type="text/javascript"> 
39. function tips_pop(){ 
40. var MsgPop=document.getElementById("winpop"); 
41. var popH=parseInt(MsgPop.style.height); 
42. if (popH==0){  
43. MsgPop.style.display="block"; 
44. show=setInterval("changeH('up')",2); 
45. } 
46. else {  
47. hide=setInterval("changeH('down')",2); 
48. } 
49. } 
50. function changeH(str) { 
51. var MsgPop=document.getElementById("winpop"); 
52. var popH=parseInt(MsgPop.style.height); 
53. if(str=="up"){  
54. if (popH<=100){  
55. MsgPop.style.height=(popH+4).toString()+"px"; 
56. } 
57. else{ 
58. clearInterval(show); 
59. } 
60. } 
61. if(str=="down"){ 
62. if (popH>=4){  
63. MsgPop.style.height=(popH-4).toString()+"px"; 
64. } 
65. else{  
66. clearInterval(hide);  
67. MsgPop.style.display="none";  
68. } 
69. } 
70. } 
71. window.onload=function(){  
72. document.getElementById('winpop').style.height='0px'; 
73. setTimeout("tips_pop()",800);  
74. } 
75. </script> 
76. </head> 
77. <body> 
78. 内容展示内容展示内容展示内容展示内容展示 
79. 内容展示内容展示内容展示内容展示内容展示 
80. 内容展示内容展示内容展示内容展示内容展示 
81. <hr> 
82. <div id="silu"> 
83. <button onclick="tips_pop()">测试按钮</button> 
84. </div> 
85. <div id="winpop"> 
86. <div class="title">您有新的消息 
87. <span class="close" onclick="tips_pop()">X</span></div> 
88. <div class="con">未读信息(1)</div> 
89. </div> 
90. <div>http://www.vevb.com/</div> 
91. </body> 
92. </html> 

希望本文所述对大家的javascript程序设计有所帮助。