jquery實現遮罩層

2022-08-30 15:39:12 字數 588 閱讀 8323

jquery確實是個好東西,引用了它之後在頁面上寫指令碼方便多了,而且它的ui外掛程式特別豐富,你想要的效果幾乎它都幫你實現了,如果你不想用它的外掛程式,自己擴充套件也很方便。

我自己寫了乙個測試遮罩層的頁面,開始總是在樣式裡設定好遮罩層的寬度和高度,可是如果顯示器的尺寸不一樣的話,這個遮罩層就會出現有些地方沒有被遮住,看網上很多人的例子也會出現這樣的問題,於是看看jquery相關的demo,發現並不會出現此類問題,看它的源**,呵呵,原來是在開啟遮罩層的時候才去設定遮罩層的寬度和高度,而且它的源**是相容了多種瀏覽器,不錯,可以直接拿過來用用。

指令碼**如下:

$("#divoverlay").css("width", width());

$("#divoverlay").css("height", height());

function height() else

// handle "good" browsers

} else

}function width() else

// handle "good" browsers

} else

}css**:

#divoverlay

jQuery遮罩層的實現

遮罩層其實就是乙個佔據整個頁面的半透明效果的頁面元素,一般用div實現。頁面中實現遮罩層,無非就是為了讓使用者只能操作彈出視窗的內容,而不允許操作彈出視窗外的內容。在實現時,我使用了兩個div,乙個遮罩層id overlay,乙個是彈出窗id dialog。1 body 2 div id overl...

jquery遮罩層的實現

首先,實際上新的視窗並不是建立出來再彈出來,而是將原本隱藏的重新顯示出來。html結構如下 div div div class mask div div class todisplay div 點選button來顯示彈出層的時候,蒙版 彈出層相繼顯示。通過z index來設定,z index 屬性設...

jQuery 遮罩層 浮動框

因為css不熟,實現總是搞不定ie6,所以結合用jquery了。1.遮罩層 指令碼 onevent function maskdiv css width body width maskdiv css height body heigth maskdiv show 要點 獲取body的大小。2.浮動框...