javascript弹出窗口实现代码

这篇文章主要介绍了javascript弹出窗口实现代码，非常人性化的设计，点击页面可以弹出窗口，感兴趣的小伙伴们可以参考一下

很多网页都实现了弹出窗口，使用方面，特别的人性化，本文就大家介绍javascript实现弹出窗口特效，具体代码如下：

1. <!DOCTYPE html> 
2. <html> 
3. <head lang="en"> 
4. <meta charset="UTF-8"> 
5. <title>弹出窗口</title> 
6. <script src="js/jquery-1.11.1.js"></script> 
7. <style> 
8. *{ 
9. margin: 0; 
10. padding: 0; 
11. } 
12. div{ 
13. margin: 0 auto; 
14. /*border: 1px solid red;*/ 
15. } 
16. .overBg{ 
17. width: 100%; 
18. height: 100%; 
19. background: gray; 
20. opacity: 0.5; 
21. filter: alpha(opacity=50); 
22. position: fixed; 
23. top:0; 
24. z-index: 300; 
25. } 
26. .tc-con{ 
27. width: 200px; 
28. height: 200px; 
29. padding: 30px; 
30. background: blanchedalmond; 
31. position: fixed; 
32. top: 0; 
33. z-index: 1000; 
34. } 
35. </style> 
36. <script> 
37. $(function(){ 
38. $('.tc').hide(); 
39. $('.btn').click(function(){ 
40. $('.tc').show(); 
41. }) 
42. $('.tc').click(function(){ 
43. $(this).hide(); 
44. }) 
45. }) 
46. </script> 
47. </head> 
48. <body> 
49. <div class="btn">点击出现</div> 
50. <div class="tc"> 
51. <div class="overBg"></div> 
52. <div class="tc-con" id="tc-con">22</div> 
53. <script> 
54. var a=document.getElementById('tc-con'); 
55. a.style.left=(document.body.clientWidth/2- a.clientWidth/2)+'px'; 
56. a.style.top=(document.documentElement.clientHeight/2- a.clientHeight/2)+'px'; 
57. </script> 
58. </div> 
59. <div style="height:2000px">22</div> 
60. </body> 
61. </html><!DOCTYPE html> 
62. <html> 
63. <head lang="en"> 
64. <meta charset="UTF-8"> 
65. <title>弹出窗口</title> 
66. <script src="js/jquery-1.11.1.js"></script> 
67. <style> 
68. *{ 
69. margin: 0; 
70. padding: 0; 
71. } 
72. div{ 
73. margin: 0 auto; 
74. /*border: 1px solid red;*/ 
75. } 
76. .overBg{ 
77. width: 100%; 
78. height: 100%; 
79. background: gray; 
80. opacity: 0.5; 
81. filter: alpha(opacity=50); 
82. position: fixed; 
83. top:0; 
84. z-index: 300; 
85. } 
86. .tc-con{ 
87. width: 200px; 
88. height: 200px; 
89. padding: 30px; 
90. background: blanchedalmond; 
91. position: fixed; 
92. top: 0; 
93. z-index: 1000; 
94. } 
95. </style> 
96. <script> 
97. $(function(){ 
98. $('.tc').hide(); 
99. $('.btn').click(function(){ 
100. $('.tc').show(); 
101. }) 
102. $('.tc').click(function(){ 
103. $(this).hide(); 
104. }) 
105. }) 
106. </script> 
107. </head> 
108. <body> 
109. <div class="btn">点击出现</div> 
110. <div class="tc"> 
111. <div class="overBg"></div> 
112. <div class="tc-con" id="tc-con">22</div> 
113. <script> 
114. var a=document.getElementById('tc-con'); 
115. a.style.left=(document.body.clientWidth/2- a.clientWidth/2)+'px'; 
116. a.style.top=(document.documentElement.clientHeight/2- a.clientHeight/2)+'px'; 
117. </script> 
118. </div> 
119. <div style="height:2000px">22</div> 
120. </body> 
121. </html> 

效果图：

以上就是为大家分享的javascript弹出窗口实现代码，希望对大家的学习有所帮助。