ajax實現windows關機效果代碼

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

效果：使用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> <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('select');
for(i = 0; i < selects.length; i++) {
       selects[i].style.visibility = visibility;
}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More