1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2. <html xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5. <title>Demo</title>
6. <style type="text/css">
7.
8. *{
9. margin:0;
10. padding:0;
11. }
12. html,body{
13. height:100%;
14. }
15. #shadow{
16. position:absolute;
17. left:0;
18. top:0;
19. width:100%;
20. height:100%;
21. background-color:#0060C0;
22. filter:alpha(opacity=20);
23. }
24. #box{
25. position:absolute;
26. left:50%;
27. top:50%;
28. width:400px;
29. height:180px;
30. margin:-90px 0 0 -200px;
31. border:1px solid #84A0C4;
32. background-color:#DFE8F6;
33. text-align:center;
34. }
35.
36. </style>
37. <script language="javascript" type="text/javascript">
38.
39. function createDiv()
40. {
41. var btnShow = document.getElementById("btnshow");
42. btnShow.disabled=true;
43.
44. var shadow = document.createElement("div");
45. shadow.setAttribute("id","shadow");
46. shadow.style.zIndex="10";
47.
48. var box=document.createElement("div");
49. box.setAttribute("id","box");
50. box.style.zIndex="999";
51.
52. var spanUser=document.createElement("span");
53. spanUser.innerHTML="User:";
54.
55. var textUser=document.createElement("input");
56. textUser.setAttribute("type","text");
57. textUser.setAttribute("id","textUser");
58.
59. var button=document.createElement("input");
60. button.setAttribute("type","button");
61. button.setAttribute("id","button1");
62. button.setAttribute("value","Confirm");
63. button.οnclick=hideDiv;
64.
65. box.appendChild(spanUser);
66. box.appendChild(textUser);
67. box.appendChild(button);
68.
69. document.body.appendChild(shadow);
70. document.body.appendChild(box);
71. }
72. function hideDiv()
73. {
74. var textUser=document.getElementById("textUser");
75. var user=document.getElementById("user");
76. user.value=textUser.value;
77.
78. var box=document.getElementById("box");
79. var shadow=document.getElementById("shadow");
80. var btnShow=document.getElementById("btnShow");
81.
82. document.body.removeChild(box);
83. document.body.removeChild(shadow);
84. btnShow.disabled=false;
85. }
86.
87. </script>
88. </head>
89. <body>
90. <div style="text-align:center">
91. <input id="user" type="text" />
92. <input id="btnshow" type="button" οnclick="createDiv()" value="Display" />
93. </div>
94. </body>
95. </html>
转载请注明原文地址: https://ju.6miu.com/read-450083.html
