实现windows关机效果代码

效果：使用Windows系统的用户在关机的时候，出现的界面只允许用户选择关机、注销或取消动作，而桌面上的程序都不能使用，并且屏幕呈现灰色状态。Windows关机效果如图22.1所示。

网页中使用此效果好处：在网页上运用这种关机效果有什么好处呢？首先，由于单击某一链接后，将用户此时不可用的操作隐藏在后台，将可用的操作放在屏幕最上层，并高亮显示，可以避免用户的误操作。其次，将信息高亮显示，也可以提醒用户应该注意的事项。

原理：在网页中实现这种效果的原理很简单。创建两个图层，一个为遮盖层，覆盖整个页面，并且显示为灰色；另一个图层作为高亮显示的部分，在遮盖层的上方，这可通过设置图层的z-index属性来设置。当取消关机效果后，只需将这两个图层元素在页面中删除即可。


代码：
<
html>

<
head>

<
title>
ajax关机效果<
/title>

<
style 
type="
text/css"
>


#lightbox 

{/*该层为高亮显示层*/
 
 
 
 
 
 
 
BORDER-RIGHT: 

#fff 
1px 
solid

 
 
 
 
 
 
 
BORDER-TOP: 

#fff 
1px 
solid

 
 
 
 
 
 
 
DISPLAY: 
block
 

 
 
 
 
 
 
 
Z-INDEX: 
9999
 
/*设置该层在网页的最上端,设置足够大*/
 
 
 
 
 
 
 
BACKGROUND: 

#fdfce9
 
/*设置背景色*/
 
 
 
 
 
 
 
LEFT: 
50%
 

 
 
 
 
 
 
 
MARGIN: 
-220px 
0px 
0px 
-250px
 

 
 
 
 
 
 
 
BORDER-LEFT: 

#fff 
1px 
solid
 

 
 
 
 
 
 
 
WIDTH: 
500px
 

 
 
 
 
 
 
 
BORDER-BOTTOM: 

#fff 
1px 
solid
 

 
 
 
 
 
 
 
POSITION: 
absolute
 

 
 
 
 
 
 
 
TOP: 
50%
 

 
 
 
 
 
 
 
HEIGHT: 
400px
 

 
 
 
 
 
 
 
TEXT-ALIGN: 
left
}

#overlay 

{/*该层为覆盖层*/
 
 
 
 
 
 
DISPLAY: 
block

 
 
 
 
 
 
Z-INDEX: 
9998
 
/*设置高亮层的下方*/
 
 
 
 
 
 
FILTER: 
alpha(opacity=20)
 
/*设置成透明*/
 
 
 
 
 
 
LEFT: 
0px
 

 
 
 
 
 
 
WIDTH: 
100%
 

 
 
 
 
 
 
POSITION: 
absolute
 

 
 
 
 
 
 
TOP: 
0px
 

 
 
 
 
 
 
HEIGHT: 
100%
 

 
 
 
 
 
 
BACKGROUND-COLOR: 

#000
 

 
 
 
 
 
 
moz-opacity: 
0.8
 

 
 
 
 
 
 
opacity: 
.80
}
<
/style>

<
/head>

<
body>

<
a 
href="
http://www.baidu.com"
 
target="
_blank"
>
百度<
/a>

<
!--该层为覆盖层 
-->

<
div 
id="
overlay"
>
<
/div>

<
!--该层为高亮显示层 
-->

<
div 
id="
lightbox"
>
<
a 
href="

#"
 
onclick="
javascript:f()"
>
关闭<
/a>
&

#38
nbsp
<
a 
href="

#"
 
onclick="
javascript:f1()"
>
打开<
/a>
<
/div>

<
/body>

<
/html>

<
script>

function 
f()

{
 
 
document.getElementById("
overlay"
).style.display="
none"


}
function 
f1()

{
 
document.getElementById("
overlay"
).style.display="
block"


}
<
/script>


注意：在IE浏览器中如果有<
select>
标记，则该标记不能被覆盖层覆盖，但在其他浏览器中则可以覆盖。图22.3所示的是IE浏览器中<
select>
标记的效果，图22.4所示的是Mozzila 
Firefox中<
select>
标记的效果。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

图22.3 
 
IE浏览器中<
select>
标记 
 
 
 
 
 
 
 
 
 
 
 


图22.4 
 
Mozzila 
Firefox浏览器中<
select>
 
标记
所以在使用IE浏览器时，要先将网页中的<
select>
元素隐藏起来。如以下代码可以用于隐藏页面所有的<
select>
元素。
selects 
= 
document.getElementsByTagName(&
#39
select&
#39
)

for(i 
= 
0
 
i 
<
 
selects.length
 
i++) 

{
 
 
 
 
 
 
 
selects[i].style.visibility 
= 
visibility

}