DIV CSS 佈局教程網

顯示彈出窗口

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

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

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

varpopUp=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+"<dividdivid=\"statusbar\"> 
 
<buttononclickbuttononclick=\"hidePopup();\">Closewindow<button>div>";  
 

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

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

varbaseText=null;functionshowPopup(w,h){varpopUp=document.getElementById("popupcontent");  
 
popUp.style.top="200px";popUp.style.left="200px";  
 
popUp.style.width=w+"px";popUp.style.height=h+"px";i  
 
f(baseText==null)baseText=popUp.innerHtml;  
 
popUp.innerHtml=baseText+"<dividdivid=\"statusbar\"><buttononclickbuttononclick=\"hidePopup();  
 
\">Closewindow<button>div>";varsbar=document.getElementById("statusbar");  
 
sbar.style.marginTop=(parseInt(h)-40)+"px";popUp.style.visibility="visible";}  
 

隱藏彈出窗口：

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

functionhidePopup(){varpopUp=document.getElementById("popupcontent");  
 
popUp.style.visibility="hidden";}  
 

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

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

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

Openpopup需要在鼠標點擊某個連接時彈出窗口：

Openpopup來自：http://www.code52.Net/page/JS/JS200811_07_165.Html