javascript動態設定一個div圖層覆蓋住另一個div圖層,並設定成透明
有時候我們在網頁上提交資料到後臺儲存時,希望前臺在儲存過程中有一個正在儲存的提示,這時可以使用一個透明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,該覆蓋圖層就隱藏了。
相關文章
- 設定一個div尺寸全屏
- javascript如何動態設定div的樣式JavaScript
- CSS如何設定div半透明效果CSS
- javascript動態設定div的顯示和隱藏JavaScript
- js動態設定div的內容JS
- jQuery動態設定div元素的尺寸jQuery
- css怎麼設定div不透明CSS
- 設定圖片在div中垂直水平居中
- 使用javascript動態設定div垂直水平居中程式碼JavaScript
- CAD如何設定圖層
- 設定div滾動條
- jquery js 設定 div 的內容,給 div 新增一個屬性jQueryJS
- 使用js動態建立div元素並設定其文字內容JS
- 利用jquery設定div元素的透明度jQuery
- C# 操作PDF 圖層(Layer)—新增、刪除圖層、設定圖層可見性C#
- JavaScript動態設定元素背景圖片JavaScript
- DIV重疊 CSS讓DIV層疊 兩個DIV或多個DIV順序重疊加CSS
- JavaScript 設定div顯示與隱藏JavaScript
- 使用javascript設定圖片的透明度JavaScript
- js如何設定一個div指定時間後隱藏JS
- jQuery動態設定div元素的高度和寬度jQuery
- ios 往當前檢視新增半透明層,並覆蓋住導航欄和標籤欄iOS
- JavaScript動態建立div並寫入文字JavaScript
- JavaScript動態建立div並新增樣式JavaScript
- CSS的力量:用一個DIV畫圖CSS
- 探討把一個元素從它所在的div 拖動到另一個div內的實現方法
- CSS實現div層半透明效果程式碼例項CSS
- jquery div層拖動效果封裝jQuery封裝
- JS實現拖動div層移動JS
- 如何動態新增和刪除一個div
- JavaScript 動態設定colSpanJavaScript
- jQuery設定div邊框顏色jQuery
- JavaScript設定背景圖片JavaScript
- 【css】設定div位於瀏覽器的最底層,離使用者最遠CSS瀏覽器
- 子div設定float後會導致父div無法自動撐開
- Android應用設定多個啟動圖示,動態列換應用圖示Android
- CSS設定div邊框演示程式碼CSS
- 設定div高度等於螢幕高度