如何建立一個JavaScript彈出DIV視窗層的效果_javascript技巧

在本教學中，我將以最通俗的語言和最簡潔的程式碼為大家示範如何建立一個JavaScript彈出DIV視窗層的效果。

建立一個彈出DIV視窗可能是現在網站/網頁製作中最常碰到的問題之一。傳統的JavaScript彈窗已經不適合目前網站的設計理念了，理由有二：首先，不友好——生硬的彈出對話框且伴隨著“喲”的一聲對用戶體驗是個很大的挑戰；其次，兼容性不夠強－有相當多的瀏覽器屏蔽了這種JS的Alert()方法。於是，一個良好使用者體驗的網站需要一個更合理的解決方案－使用很少的HTML程式碼，很少的CSS程式碼和幾行的JavaScript程式碼來模擬瀏覽器預設的彈出視窗（即替換掉預設的Alert()介面和功能）。

實作原理：

首先，我們將彈出框中的內容放置在一個特殊的DIV層中，然後預設隱藏它（即初始不可見，使用CSS即可實現）。當使用者執行某個動作時－例如點擊某個連結或將滑鼠遊標移到某個連結上－我們將先前設定好的隱藏層顯示在所有頁面元素的最上層（將使用JS操作實作）。此外，我們還將在彈出DIV視窗中設定一個按鈕來執行－當使用者點擊此按鈕時關閉視窗的功能。

實現過程：

就如我上面提到的，我們首先需要創建一個特殊的DIV層，然後我們將彈出視窗的內容放在這個DIV層裡面。在這裡，我們將其ID命名為「popupcontent 」以區別於其他DIV層。

這是一個DIV彈跳窗效果!

彈出視窗的CSS修飾代碼：

接下來，讓我們給上面已創建好的這個DIV彈出層進行CSS美化。其中最重要的幾個參數分別是：overflow（內容溢出）, visibility（可見性） 和position（定位方式）。同時我也為這個視窗效果添加了很多其他程式碼，但這些只是用於美化，使這個視窗更絢麗。所以，我們最後定義的CSS程式碼形如：

複製程式碼 程式碼如下:

程式碼如下:


#🎜>#🎜># popupcontent{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;order padding:5px;
}


從上面CSS程式碼中的紅色部分可以看出：這個DIV層初始預設狀態是不可見的。
大家可以依照需求對以上程式碼進行美化，但請務必保留position，visibility，overflow三個屬性。

JavaScript程式碼用於觸發和顯示彈出視窗：


這可能是本教學最重要、最有趣的地方了。我們接下來會寫2個過程函數分別用來顯示和隱藏上面那個DIV彈跳窗。當然，這兩個函數之中會包含一些主體邏輯。

過程函數中需要順序包含的邏輯：

計算JavaScript彈出視窗在螢幕上的顯示位置（定位）；
在彈出視窗中新增一個狀態列（或按鈕） ，用於關閉開啟狀態下的視窗；
顯示彈出視窗。

為了簡單起見，本例中我們設定的顯示位置是Top：200，Left：200。即以瀏覽器內容框的左上角為座標，向下偏移200PX，向左偏移200PX。

彈出視窗的大小我們可以在顯示函數的參數中進行設置，包括兩個參數：視窗長度和視窗寬度。

如果你需要將本例中的程式碼進行二次開發，有個地方需要特別注意，那就是取得彈出視窗DIV層的DOM對象，我們可以透過下面這個getElementById函數來取得ID名為“Popcontent”的DOM對象。 複製程式碼

程式碼如下:

在取得這個（彈出視窗）DOM物件之後，我們可以在JS程式碼中修改視窗的相對的位置和視窗大小。 複製程式碼

程式碼如下:


popUp.style.top = "200px";視窗距離瀏覽器內容區最上方的偏移值

popUp.style.left = "200px";//視窗距離瀏覽器內容區最左邊的偏移值

popUp. style.width = w "px";//視窗的寬度

popUp.style.height = h "px";//視窗的高度
接下來，我們需要為視窗新增一個「關閉」按鈕，用於在視窗開啟狀態下關閉這個視窗。要完美的實現這項功能，首先我們需要聲明一個全域變量，用於儲存彈出視窗DIV中的內容。這是因為，如果你在一個頁面中顯示多個內容不同的彈出窗口，你不需要將按鈕重複的複製到這些DIV層中，這樣就簡化了行為邏輯：

複製程式碼 程式碼如下:

if (baseText == null) baseText = popUp.innerHTML;

"

Close window

";

最後一個需要注意的地方是這個「關閉」按鈕的定位問題。這個很容易實現，設定一下這個按鈕物件的向上的空白邊即可（空白邊的數值設定成稍小於整個彈出視窗的DIV高度即可）。

至此，所有的行為邏輯講解完畢，最後的彈跳窗顯示函數的完整程式碼如下：

複製程式碼複製程式碼

程式碼如下:


var baseText = null;

function showPopup(w,h){
var popUp = document.getElementById(w,h){
var popUp = document.getElementById(""popupById(""popa); >popUp.style.top = "200px";
popUp.style.left = "200px";
popUp.style.width = w "px";
popUp.style.height = h "px ";
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText "

Close window

";
var sbar = document.getElementById("statusbar");
sbar.style.marginTop = (parseInt(h)-40) "px";

popUpUp .style.visibility = "visible";
}

隱藏彈出視窗：

彈出視窗的過程就相當簡單了。只需要先取得彈出視窗那個DIV的DOM對象，然後將其屬性設為「隱藏」即可。 複製程式碼

程式碼如下:


function hideup(){

function hideup(){ .getElementById("popupcontent"); popUp.style.visibility = "hidden";
}



拓展HTML程式碼最終實現彈窗效果：


我們需要做的就是在某個連結或按鈕的對應事件上加入JS函數「showPopup() 」即可。
例如，需要在滑鼠移動到某連接上時彈出視窗：
Open popup 需要在滑鼠點擊某個連線時彈出視窗： Open popup