在做網頁的時候，彈出層是個很好用的東西，它既可以顯示出我們想要的內容，又無需重新載入，而且彈出層的樣式還可以按我們想要的效果改動，今天就來說一說怎麼做一個彈出層。

首先說一個js的方法。這個方法是以前看到的。

既然是做彈出層，那麼當然得先做幾個div出來，如圖

首先是底層的一個div，然後是彈出的div，在底層和彈出之間還有個div，這個div是用來擋住底層div的，防止在視窗彈出後還能點選底層的元素。然後是兩個a標籤，用來控制層視窗的開啟與關閉。下面上程式碼：

<a href = "JavaScript:void(0)" onclick = "document.getElementById
 
('light').style.display='block';document.getElementById('fade').style.display='block'">點選開啟</a>
 <div id="light">這是一個層視窗示例程式. 
      <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
 
點選關閉</a>
</div> 
<div id="fade"></div> 

關於層視窗的樣式部分，我就不貼出來了，可以看出程式碼其實很簡單，只需給a標籤新增一個onclick點選事件就可以了，用display來控制層視窗的顯示與隱藏，light即是我們想要的層視窗，fade則為阻擋層。

但是呢，他又沒有完全達到我們想要的效果，當點選開啟的時候，它就直接彈了出來，給人的感覺很突兀，如果能有個過度效果那看起來就很好了。這時jquery就能很好地發揮作用了。
fadein、fadeout實現淡入淡出，這裡放一個演示連結fade,而hide和show

<a href="#" id="showWin">顯示</a>
<div id="light">這是一個層視窗示例程式. 
     <a href="#" id="hideWin">隱藏</a>
</div> 
<div id="fade"></div> 

jquery部分：

$(document).ready(function () {
            $("#showWin").click(function(){
                $("#light").slideDown();
                $("#fade").fadeIn();
            });

            $("#hideWin").click(function(){
                $("#light").slideUp();
                $("#fade").fadeOut();
            })
        });

這樣就給層視窗添加了一個動畫效果，在點選時層視窗會在一秒鐘的時間內滑下來，給人的感覺友好很多。

其實如果對css中的transition熟悉的話，完全可以用css做出這樣的效果來，甚至做出更多的動畫效果，有興趣的可以先試試，下次將為大家帶來css實現的層視窗效果。