javascript動態設定一個div圖層覆蓋住另一個div圖層，並設定成透明

newborn2012發表於2013-11-23
JavaScript

有時候我們在網頁上提交資料到後臺儲存時，希望前臺在儲存過程中有一個正在儲存的提示，這時可以使用一個透明div圖層覆蓋住編輯資料的圖層，並顯示等待的圖示，表示正在儲存中，當前資料暫時不能再編輯了，這種效果對於使用者來說比較友好，下面就來總結一下關鍵的實現技術：

1，建立一個div圖層，半透明，並且在初始時不顯示

這個採用css就可以實現，並且相容各大瀏覽器，如下：

CSS程式碼：

#savewait
{
	position:absolute;
	top:50px;
	width:800px;
	height:300px;
	filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;z-index:100; background-color:#ffffff;
	display:none;
}

這裡CSS程式碼中的top可以先隨便設定上一個值，但是不能為空，因為position如果設定為absolute之後，如果left和top都為空，其位置是相對於前一個有定位的div的，而如果top或left設定了值，則圖層就相對於頁面的位置，並且浮於其它圖層之上，即不會和其它圖層搶位置。

HTML程式碼： 

	<div id="savewait" name="savewait">
		<img src="/images/bigloader.gif" />
	</div>
2，獲取一個div圖層的位置

參考：獲取div的絕對位置和控制div的隱藏與顯示 判斷某一點是否在某一區域
要覆蓋住一個div圖層，就要獲取這個div的絕對位置、寬度、高度，找到div的節點為p，則：

p.clientHeight     獲取物件的高度，不計算任何邊距、邊框、滾動條，但包括該物件的補白。   
p.clientLeft     獲取    offsetLeft     屬性和客戶區域的實際左邊之間的距離。
p.clientTop     獲取    offsetTop     屬性和客戶區域的實際頂端之間的距離。
p.clientWidth     獲取物件的寬度，不計算任何邊距、邊框、滾動條，但包括該物件的補白。
p.offsetHeight     獲取物件相對於版面或由父座標    offsetParent     屬性指定的父座標的高度。
p.offsetLeft     獲取物件相對於版面或由    offsetParent     屬性指定的父座標的計算左側位置。
p.offsetParent     獲取定義物件    offsetTop     和    offsetLeft     屬性的容器物件的引用。
p.offsetTop     獲取物件相對於版面或由    offsetTop     屬性指定的父座標的計算頂端位置。 
p.offsetWidth     獲取物件相對於版面或由父座標    offsetParent     屬性指定的父座標的寬度。

這裡我們採用p.offsetLeft，p.offsetTop，p.offsetWidth，p.offsetHeight。

3，設定覆蓋div圖層的位置

只要將css屬性中的left，top，width，height設定成被覆蓋div的相應值就可以，同時將display屬性設定為block，如下：

        savewait.style.display = "block";
        savewait.style.top = p.offsetTop + "px";
        savewait.style.left = p.offsetLeft + "px";
        savewait.style.width = p.offsetWidth + "px";
        savewait.style.height = (p.offsetHeight-30) + "px";
這裡一定要注意“px”這個單位要加上，否則設定的值根本無效。

4，儲存成功之後，可以設定display為none，該覆蓋圖層就隱藏了。




相關文章