jquery实现弹出层效果实例

这篇文章主要介绍了jquery实现弹出层效果的方法,实例分析了jQuery实现弹出层的技巧,涉及jQuery操作页面元素与样式的技巧,需要的朋友可以参考下

本文实例讲述了jquery实现弹出层效果的方法。分享给大家供大家参考。具体实现方法如下：

1. <head runat="server"> 
2. <title>jQuery弹出层</title> 
3. <script type="text/javascript" src="js/jquery-1.3.2-min.js"></script> 
4. <script type="text/javascript"> 
5. $(function() { 
6. $("#btnShow").click(function() { 
7. // var str = "我是弹出对话框"; 
8. // $(".form").html(str); 
9. $("#BgDiv").css({ display: "block", height: $(document).height()}); 
10. var yscroll = document.documentElement.scrollTop; 
11. $("#DialogDiv").css("top", "100px"); 
12. $("#DialogDiv").css("display", "block"); 
13. document.documentElement.scrollTop = 0; 
14. }); 
15. $("#btnClose").click(function() { 
16. $("#BgDiv").css("display", "none"); 
17. $("#DialogDiv").css("display", "none"); 
18. }); 
19. }); 
20. </script> 
21. <style type="text/css"> 
22. body, h2 
23. { 
24. margin: 0; 
25. padding: 0; 
26. } 
27. #BgDiv 
28. { 
29. background-color: #e3e3e3; 
30. position: absolute; 
31. z-index: 99; 
32. left: 0; 
33. top: 0; 
34. display: none; 
35. width: 100%; 
36. height: 1000px; 
37. opacity: 0.5; 
38. filter: alpha(opacity=50); 
39. -moz-opacity: 0.5; 
40. } 
41. #DialogDiv 
42. { 
43. position: absolute; 
44. width: 400px; 
45. left: 50%; 
46. top: 50%; 
47. margin-left: -200px; 
48. height: auto; 
49. z-index: 100; 
50. background-color: #fff; 
51. border: 1px #8FA4F5 solid; 
52. padding: 1px; 
53. } 
54. #DialogDiv h2 
55. { 
56. height: 25px; 
57. font-size: 14px; 
58. background-color: #8FA4F5; 
59. position: relative; 
60. padding-left: 10px; 
61. line-height: 25px; 
62. } 
63. #DialogDiv h2 a 
64. { 
65. position: absolute; 
66. right: 5px; 
67. font-size: 12px; 
68. color: #000000; 
69. } 
70. #DialogDiv .form 
71. { 
72. padding: 10px; 
73. } 
74. </style> 
75. </head> 
76. <body> 
77. <form id="form1" runat="server"> 
78. <div id="BgDiv"></div> 
79. <div id="DialogDiv" style="display: none"> 
80. <h2> 
81. 弹出层<a href="#" id="btnClose">关闭</a></h2> 
82. <div class="form"> 
83. 我是弹出对话框!!<br /> 
84. 我是弹出对话框!!<br /> 
85. 我是弹出对话框!!<br /> 
86. 我是弹出对话框!!<br /> 
87. 我是弹出对话框!!<br /> 
88. 我是弹出对话框!!<br /> 
89. 我是弹出对话框!!<br /> 
90. </div> 
91. </div> 
92. <p> 
93. </p> 
94. <p align="center"> 
95. <input value="弹出" class="but" type="button" id="btnShow" /> 
96. </p> 
97. </form> 
98. </body> 
99. </html> 

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