本例要实现一个按钮,单击按钮时,将网页所有内容变灰,同时弹出一个高亮框,就像windows系统的关机效果
Code1 <head runat="server">
2 <title>Untitled Page</title>
3
4 <script language="javascript" type="text/javascript">
5 function showFullDiv()
6 {
7
8 if(!document.getElementById)return false;
9 var obj=document.getElementById("fullDiv");
10 obj.style.width=document.documentElement.scrollWidth+"px";
11 obj.style.height=document.documentElement.scrollHeight+"px";
12 obj.style.display="block";
13 obj.style.zIndex="1000";
14 var lightBox=document.getElementById("lightbox");
15 lightbox.style.display="block";
16 lightbox.style.left=(document.body.clientWidth/2-parseInt(lightbox.style.width,10)/2+"px");
17 lightbox.style.top=(document.body.clientHeight/2-parseInt(lightbox.style.height,10)/2-200+"px");
18 var select=document.getElementsByTagName("select");
19 for(var i=0;i<select.length;i++)
20 {
21 select[i].style.display="none";
22 }
23 }
24 function test()
25 {
26 if(!document.getElementById("fullDiv")) return false;
27 showFullDiv();
28
29 }
30 function hiddenFullDiv()
31 {
32 if(!document.getElementById)return false;
33 var obj=document.getElementById("fullDiv");
34 obj.style.display="none";
35 var lightbox=document.getElementById("lightbox");
36 lightbox.style.display="none";
37
38 var select=document.getElementsByTagName("select");
39 for(var i=0;i<select.length;i++)
40 {
41 select[i].style.display="inline";
42 }
43
44 }
45 function GetWidthOrHeight()
46 {
47 var s = "";
48 s += "\r\n网页可见区域宽："+ document.body.clientWidth;
49 s += "\r\n网页可见区域高："+ document.body.clientHeight;
50 s += "\r\n网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)";
51 s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
52 s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
53 s += "\r\n网页正文全文高："+ document.body.scrollHeight;
54 s += "\r\n网页被卷去的高："+ document.body.scrollTop;
55 s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
56 s += "\r\n网页正文部分上："+ window.screenTop;
57 s += "\r\n网页正文部分左："+ window.screenLeft;
58 s += "\r\n屏幕分辨率的高："+ window.screen.height;
59 s += "\r\n屏幕分辨率的宽："+ window.screen.width;
60 s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
61 s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
62 s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
63 s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
64 alert(s);
65
66 }
67 window.onresize="test();";
68 </script>
69
70 </head>
71 <body onresize="test();">
72 <form id="form1" runat="server">
73 <select>
74 <option value='ning'>林宁</option>
75 <option value='ning'>林宁</option>
76 </select>
77 <input type="button" value="显示" onclick="showFullDiv();" />
78 <input type="button" value="查看" onclick="GetWidthOrHeight();" />
79 <div style="position: absolute; top: 0px; left: 0px; background-color: #ccc; display: none;
80 filter: alpha(opacity=60); cursor: wait;" id="fullDiv">
81 </div>
82
83
84 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
85 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
86 <hr />
87 <div id="lightbox" style="border:1px solid green;background-color:white;300px;height:100px;z-index:1001;display:none;position:absolute;left:100px;top:0px;line-height:100px;text-align:center">
88
89 <input type="button" value="消失" onclick="hiddenFullDiv();");
90
91 </div>
92
93
94 </form>
95 </body>
有几个问题:
1.select 遮挡不了的问题,我这里就将select标签全部隐藏,不知道各位大侠有没有一个好的解决方案
2.不可操作区域的Cursor的问题,解决方案:将Div的CSS的Cursor:wait换成cursor:not-allowed或使用光标文件curosor:url(filename.cur);