jquery遮罩層的實現

2022-07-15 05:36:10 字數 788 閱讀 2343

首先，實際上新的視窗並不是建立出來再彈出來，而是將原本隱藏的重新顯示出來。

html結構如下：

<


div>


div>


<


div 


class


="mask"


>


div>


<


div 


class


="todisplay"


>


div>
點選button來顯示彈出層的時候，蒙版、彈出層相繼顯示。通過z-index來設定，z-index 屬性設定元素的堆疊順序，擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。

並且可以放心使用，因為所有主流瀏覽器都支援 z-index 屬性。

設計彈出層樣式： 

.todisplay
設計蒙版樣式：

.mask
新增js**（需要jquery.js）：

$(document).ready(function


() );


/*點選id為"close"的button關閉彈出層


*/$("#close").click(function


() );


});
效果瀏覽：

jquery實現遮罩層

jquery確實是個好東西，引用了它之後在頁面上寫指令碼方便多了，而且它的ui外掛程式特別豐富，你想要的效果幾乎它都幫你實現了，如果你不想用它的外掛程式，自己擴充套件也很方便。我自己寫了乙個測試遮罩層的頁面，開始總是在樣式裡設定好遮罩層的寬度和高度，可是如果顯示器的尺寸不一樣的話，這個遮罩層就會出現...

jQuery遮罩層的實現

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

jQuery 遮罩層 浮動框

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