jQuery遮罩層的實現

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

在實現時，我使用了兩個div,乙個遮罩層id=overlay，乙個是彈出窗id=dialog。

1

<
body
>
2<
div 
id="overlay"
>
div>
3<
div 
id="dialog"
>點選彈出窗可以隱藏遮罩層
div>
4<
a id
="show"
href
="#"
>點選彈窗
a>
5body
>

有了頁面結構後，接下來應該實現的是設定這些頁面元素的樣式，使遮罩層為透明的效果，並且開始時遮罩層和彈出視窗層都隱藏，實現的css如下：

#overlay#dialog

要注意的是設定#dialog的z-index值要比#overlay的高，而#overlay的z-index要比一般的元素的高，這樣才能達到遮罩住其它頁面元素的效果，不允許使用者再操作除了彈出窗的其它內容。

然後用jquery來實現彈出和隱藏的動作吧，**如下：

1 $(document).ready(function

());
5 $("#dialog").click(function
());
8});9//
顯示遮罩層和彈出窗
10function
showdg();
14//
隱藏遮罩層和彈出窗
15function
hidedg();
19

jquery實現遮罩層

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

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.浮動框...