快捷導(dǎo)航

如何創(chuàng)建一個JavaScript彈出DIV窗口層的效果

更新時間：2013年09月25日 15:13:56 作者：

我將用最通俗的語言和最簡潔的代碼給大家演示如何創(chuàng)建一個JavaScript彈出DIV窗口層的效果

在本教程中，我將用最通俗的語言和最簡潔的代碼給大家演示如何創(chuàng)建一個JavaScript彈出DIV窗口層的效果。

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

實(shí)現(xiàn)原理：

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

實(shí)現(xiàn)過程：

就如我上面提到的，我們首先需要創(chuàng)建一個特殊的DIV層，然后我們將彈出窗口的內(nèi)容放在這個DIV層里面。在這里，我們將其ID命名為“popupcontent ”以區(qū)別于其他DIV層。

<div id="popupcontent">這是一個DIV彈窗效果!</div>

彈出窗口的CSS修飾代碼：

接下來，讓我們給上面已創(chuàng)建好的這個DIV彈出層進(jìn)行CSS美化。其中最重要的幾個參數(shù)分別是：overflow（內(nèi)容溢出）, visibility（可見性）和position（定位方式）。同時我也給這個窗口效果添加了很多其他代碼，但這些只是用于美化，使這個窗口更絢麗。所以，我們最后定義的CSS代碼形如：

復(fù)制代碼代碼如下:

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

從上面CSS代碼中的紅色部分可以看出：這個DIV層初始默認(rèn)狀態(tài)是不可見的。

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

JavaScript代碼用于觸發(fā)和顯示彈出窗口：

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

過程函數(shù)中需要順序包含的邏輯：

計算JavaScript彈出窗口在屏幕上的顯示位置（定位）；
在彈出窗口中添加一個狀態(tài)欄（或按鈕），用于關(guān)閉打開狀態(tài)下的窗口；
顯示彈出窗口。

為了簡單起見，本例中我們設(shè)置的顯示位置是Top：200，Left：200。即以瀏覽器內(nèi)容框的左上角為坐標(biāo)，向下偏移200PX，向左偏移200PX。

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

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

復(fù)制代碼代碼如下:

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

在獲取這個（彈出窗口）DOM對象之后，我們可以在JS代碼中修改窗口的相對的位置和窗口大小。

復(fù)制代碼代碼如下:

 
popUp.style.top = "200px";//窗口距離瀏覽器內(nèi)容區(qū)最上方的偏移值 

popUp.style.left = "200px";//窗口距離瀏覽器內(nèi)容區(qū)最左邊的偏移值 

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

popUp.style.height = h + "px";//窗口的高度

接下來，我們需要給窗口添加一個“關(guān)閉”按鈕，用于在窗口開啟狀態(tài)下關(guān)閉這個窗口。要完美的實(shí)現(xiàn)這一功能，首先我們需要聲明一個全局變量，用于存儲彈出窗口DIV中的內(nèi)容。這是因?yàn)椋绻阍谝粋€頁面中顯示多個內(nèi)容不同的彈出窗口，你不需要將按鈕重復(fù)的復(fù)制到這些DIV層中，這樣就簡化了行為邏輯：

復(fù)制代碼代碼如下:

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

popUp.innerHTML = baseText + 

"<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window <button></div>";

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

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

復(fù)制代碼代碼如下:

 
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"; 
} 

隱藏彈出窗口：

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

復(fù)制代碼代碼如下:

 
function hidePopup(){ 
var popUp = document.getElementById("popupcontent"); 
popUp.style.visibility = "hidden"; 
} 

拓展HTML代碼最終實(shí)現(xiàn)彈窗效果：

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

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

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

需要在鼠標(biāo)點(diǎn)擊某個連接時彈出窗口：

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

您可能感興趣的文章: