JavaScript点击按钮后弹出透明浮动层的方法

这篇文章主要介绍了JavaScript点击按钮后弹出透明浮动层的方法,可实现点击按钮弹出居中的透明浮动层的效果,涉及javascript操作鼠标事件及页面样式的相关技巧,需要的朋友可以参考下

本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法。分享给大家供大家参考。具体分析如下：

这里实现点击后页面变灰色，并用JS弹出一个居中的浮动层提示窗口，这个窗口是透明的，可以设置透明度，网上已经有很多类似的JavaScript代码，你可以借鉴一下。

1. <HTML> 
2. <HEAD> 
3. <TITLE>浮动层居中的对话框效果演示</TITLE> 
4. <META http-equiv=Content-Type content="text/html; charset=utf-8"> 
5. <STYLE type=text/css> 
6. HTML { 
7. HEIGHT: 100% 
8. } 
9. BODY { 
10. HEIGHT: 100% 
11. } 
12. BODY { 
13. FONT-SIZE: 14px; FONT-FAMILY: Tahoma, Verdana, sans-serif 
14. } 
15. DIV.neat-dialog-cont { 
16. Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; 
17. LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100% 
18. } 
19. DIV.neat-dialog-bg { 
20. Z-INDEX: -1; FILTER: alpha(opacity=70); LEFT: 0px;  
21. WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; 
22. BACKGROUND-COLOR: #eee; opacity: 0.7 
23. } 
24. DIV.neat-dialog { 
25. BORDER-RIGHT: #555 1px solid; BORDER-TOP: #555 1px solid; 
26. Z-INDEX: 99; MARGIN-LEFT: auto; BORDER-LEFT: #555 1px solid; 
27. WIDTH: 30%; MARGIN-RIGHT: auto; BORDER-BOTTOM: #555 1px solid; 
28. POSITION: relative; TOP: 25%; BACKGROUND-COLOR: #fff 
29. } 
30. DIV.neat-dialog-title { 
31. PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; FONT-SIZE: 0.8em; 
32. PADDING-BOTTOM: 0.1em; MARGIN: 0px; LINE-HEIGHT: 1.2em; 
33. PADDING-TOP: 0.1em; BORDER-BOTTOM: #444 1px solid; POSITION: relative 
34. } 
35. IMG.nd-cancel { 
36. RIGHT: 0.2em; POSITION: absolute; TOP: 0.2em 
37. } 
38. DIV.neat-dialog P { 
39. PADDING-RIGHT: 0.2em; PADDING-LEFT: 0.2em; 
40. PADDING-BOTTOM: 0.2em; PADDING-TOP: 0.2em; TEXT-ALIGN: center 
41. } 
42. </STYLE> 
43. <SCRIPT type=text/javascript> 
44. function NeatDialog(sHTML, sTitle, bCancel) 
45. { 
46. window.neatDialog = null; 
47. this.elt = null; 
48. if (document.createElement && document.getElementById) 
49. { 
50. var dg = document.createElement("div"); 
51. dg.className = "neat-dialog"; 
52. if (sTitle) 
53. sHTML = '<div class="neat-dialog-title">'+sTitle+ 
54. ((bCancel)? 
55. '<img src="x.gif" alt="Cancel" class="nd-cancel" />':'')+ 
56. '</div>/n' + sHTML; 
57. dg.innerHTML = sHTML; 
58. var dbg = document.createElement("div"); 
59. dbg.id = "nd-bdg"; 
60. dbg.className = "neat-dialog-bg"; 
61. var dgc = document.createElement("div"); 
62. dgc.className = "neat-dialog-cont"; 
63. dgc.appendChild(dbg); 
64. dgc.appendChild(dg); 
65. if (document.body.offsetLeft > 0) 
66. dgc.style.marginLeft = document.body.offsetLeft + "px"; 
67. document.body.appendChild(dgc); 
68. if (bCancel) document.getElementById("nd-cancel").onclick = function() 
69. { 
70. window.neatDialog.close(); 
71. }; 
72. this.elt = dgc; 
73. window.neatDialog = this; 
74. } 
75. } 
76. NeatDialog.prototype.close = function() 
77. { 
78. if (this.elt) 
79. { 
80. this.elt.style.display = "none"; 
81. this.elt.parentNode.removeChild(this.elt); 
82. } 
83. window.neatDialog = null; 
84. } 
85. function openDialog() 
86. { 
87. var sHTML = '<p>你现在看到的是一个层窗口，是被JS控制弹出的</p>'+ 
88. '<p><button onclick="window.neatDialog.close()">关闭</button></p>'; 
89. new NeatDialog(sHTML, "你知道吗？", false); 
90. } 
91. </SCRIPT> 
92. <BODY> 
93. <H1>浮动层居中的效果</H1> 
94. <BUTTON onclick=openDialog()>点此演示效果</BUTTON> 
95. </BODY> 
96. </HTML> 

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