創建一個彈出DIV窗口

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

 

實現原理：

---

首 先，我們將彈出框中的內容放置在一個特殊的DIV層中，然后默認隱藏它（即初始不可見，使用CSS即可實現）。當用戶執行某個動作時——比如點擊某個鏈接 或者將鼠標光標移動到某個鏈接上——我們將之前設置好的隱藏層顯示在所有頁面元素的最上層（將使用JS操作實現）。此外，我們還將在彈出DIV窗口中設置 一個按鈕來執行——當用戶點擊此按鈕時關閉窗口的功能。

 

實現過程:

---

就如我上面提到的，我們首先需要創建一個特殊的DIV層，然后我們將彈出窗口的內容放在這個DIV層里面。在這里，我們將其ID命名為“popupcontent ”以區別於其他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;

border:1px solid #333;

padding:5px;}

從上面CSS代碼中的紅色部分可以看出：這個DIV層初始默認狀態是不可見的。

大家可以根據需要對以上代碼進行美化，但請務必保留position，visibility，overflow三個屬性。

JavaScript代碼用於觸發和顯示彈出窗口：

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

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

計算JavaScript彈出窗口在屏幕上的顯示位置（定位）； 在彈出窗口中添加一個狀態欄（或按鈕），用於關閉打開狀態下的窗口； 顯示彈出窗口。 為了簡單起見，本例中我們設置的顯示位置是Top：200，Left：200。即以瀏覽器內容框的左上角為坐標，向下偏移200PX，向左偏移 200PX。

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

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

var popUp = document.getElementById( "popupcontent" );

 

在獲取這個（彈出窗口）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;
   popUp.innerHTML = baseText +
      "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window<button></div>";

 

最后一個需要注意的地方是這個“關閉”按鈕的定位問題。這個很容易實現，設置一下這個按鈕對象的向上的空白邊即可（空白邊的數值設置成稍小於整個彈出窗口的DIV高度即可）。

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

 

var baseText = null;
function showPopup(w,h){
var popUp = document.getElementById("popupcontent");    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 + "<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window<button></div>";
var sbar = document.getElementById("statusbar");

sbar.style.marginTop = (parseInt(h)-40) + "px";

popUp.style.visibility = "visible";}

隱藏彈出窗口

---

隱藏彈出窗口的過程就相當簡單了。只需要首先獲取彈出窗口那個DIV的DOM對象，然后將其屬性設置成“隱藏”即可。

function hidePopup(){

var popUp = document.getElementById("popupcontent");

popUp.style.visibility = "hidden";

}

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

我們需要做的就是在某個鏈接或者按鈕的對應事件上添加JS函數“showPopup() ”即可。

比如，需要在鼠標移動到某連接上時彈出窗口：

<a href="#" onmouseover="showPopup(300,200);" >Open popup</a>需要在鼠標點擊某個連接時彈出窗口：

<a href="#" onclick="showPopup(300,200);" >Open popup</a>

 

如果是在asp.net中寫的話，注意在用服務器端控件的時候，會postback，所以有2中方式解決它

1.  用html控件

2. 在調用function方法體的最后加上return false; 再在調用的地方return functionname();