纯粹是为了打发时间，手写了一个JS的 alert控件。
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<html> <head> <script type="text/javascript"> var alertObj = new Object(); var generalStyle = { zIndex: 0, width: "200px", height: "100px", border: "thick solid #CCCCCC", background: "#FFFFFF", position: "absolute", top: "35%", left: "40%"} var txtStyle = { textAlign: "center"} var btnStyle = { position: "absolute", left: "40%", top: "70%", color: "#333333", fontWeight: "bold", outlineColor:"#3366FF", outlineStyle:"ridge", outlineWidth:"thin", //outline: "thin ridge #3366FF", innerHTML: "OK"} alertObj = { generalSet: generalStyle, txtSet: txtStyle, btnSet: btnStyle, isExist: false} alertObj.createComponent = function() { var component = document.createElement(arguments[0]); var styles = arguments[1]; for (var property in styles) { if (styles[property] != null) { try{ component.style[property] = styles[property]; }catch(err){ document.write(err.name+":"+property+"<br/>");//set property error! } } } return component; } alertObj.show = function() { if(!this.isExist){ this.isExist = true; var bodyObj = document.body; bodyObj.style.zIndex = -1; bodyObj.style.background = "#999999"; var divObj = this.createComponent("div", this.generalSet); var txtObj = this.createComponent("p", this.txtSet); txtObj.innerHTML = arguments[0]; var btnObj = this.createComponent("button", this.btnSet); btnObj.innerHTML = this.btnSet.innerHTML; btnObj.onclick = function() { bodyObj.style.zIndex=0; bodyObj.style.background=""; bodyObj.removeChild(divObj); if(alertObj.isExist){ alertObj.isExist = false; } } divObj.appendChild(txtObj); divObj.appendChild(btnObj); bodyObj.appendChild(divObj); } } function show(s) { alertObj.show(s); } </script> </head> <body> <p onclick="show('inner test');">Click show alert</p> </body> </html> |
