本文向大家描述一下如何***實現(xiàn)DIV彈出層功能，這里有二種方式處理DIV彈出窗口，一種是用JavaScript代碼，另一種是用樣式，具體內容請看本文詳細介紹，相信本文介紹一定會讓你有所收獲。

***實現(xiàn)DIV彈出層功能

要想***實現(xiàn)DIV彈出層功能，這里推薦一個輕量級JavaScript工具：subModal（包括圖片和樣式僅8KB左右，JavaScript文件4.27KB），subModal實現(xiàn)用DIV模擬的模式DIV彈出窗口，非常漂亮且簡單實用。其中發(fā)表評論窗口就是DIV彈出窗口樣式。

下面將介紹此JavaScript工具的使用：

在開始使用之前需要下載文件：

已經整理后的版本：subModal

原始版本（英文）：http://gabrito.com/files/subModal/可以在此頁面查看運行效果。頁面引用相關文件。在需要DIV彈出窗口的頁面上引用樣式文件和Javascript文件：

viewsourceprint?

1.<linkrellinkrel="stylesheet"type="text/css"href="submodal.css"/> 
2.<scripttypescripttype="text/javascript"src="submodal.JavaScript"></script> 
 

源代碼中的submodal.JavaScript,submodal.css,loading.html,loading.gif,close.gif是必須文件，其他為演示實例文件。

若要改變DIV彈出窗口樣式，或者改變close.gif圖片路徑，請編輯submodal.css
若需要改變加載效果，需編輯loading.html，現(xiàn)在我們就可以編寫代碼來DIV彈出窗口了，有二種方式處理DIV彈出窗口：

◆用JavaScript代碼：

DIV彈出窗口的函數(shù)為：showPopWin(url,width,height,returnFunc),url為彈出鏈接，width為寬帶，height為高度，returnFunc為當窗口彈出后的回調函數(shù)。其中高寬以像素為單位，例如：

<!–以下代碼將會在彈出DIV彈窗，彈窗中頁面為modalcontent.html,彈窗的寬度為400像素，高度為200像素–>

viewsourceprint?

1.<p><buttononclickbuttononclick=
"showPopWin('modalcontent.html',400,200,null);"> 
showmodalwindowbutton</button></p> 

◆用樣式:

subModal支持設置特別的樣式來完成DIV彈出窗口的功能。當鏈接上設置submodal或者submodal-width-height格式的樣式后，頁面運行過程中subModal將會為鏈接增加處理事件。當點擊鏈接時，將在DIV彈窗中展示鏈接的頁面，而不是新的瀏覽器窗口。

例如：

viewsourceprint? 

1.<p><aclassaclass="submodal"href="modalcontent.html"> 
showmodalwindowusingclass</a> 
2.<!--將在DIV彈窗中顯示dodalcontent.html頁面--></p> 
3.  
4.<p><aclassaclass="submodal-200-400"href="modalcontent.html"> 
showmodalwindowusingclassandoverridingdefaultsize</a> 
5.<!--將在DIV彈窗中顯示dodalcontent.html頁面，且寬帶為200像素，高度為400像素--></p> 
 
 

 關閉彈出可以在當前頁碼調用hidePopWin()函數(shù)或者在彈出頁面中調用window.parent.hidePopWin()，如：

viewsourceprint? 

1.<buttononclickbuttononclick="window.parent.hidePopWin()">close</button> 
 

在http://www.cnblogs.com/lzppcc/archive/2008/01/14/1038977.html看到到的這個彈出框很漂亮,但不能通過鼠標拖動彈出的窗口,難免遺憾,便自己寫了JavaScript代碼,實現(xiàn)了這個功能.

subModal.JavaScript
//***********************以下為新增控件的拖曳事件*************************************************** 

vargMouseMove=false;  
varx,y,z  
//開始拖曳  
functionstartDrag(obj){  
if(event.button==1||event.button==0){  
x=window.event.clientX;  
y=window.event.clientY;  
z=obj.style.zIndex;  
obj.style.zIndex=500;  
obj.setCapture();//設置屬于當前對象的鼠標捕捉  
gMouseMove=true;  
}  
}  
//拖動事件,obj為激發(fā)當前事件的控件,dragID為等拖曳控件的ID  
varDraging=functionDraging(obj,dragID){  
if(gMouseMove){  
varoldwin;  
if(dragID=='undefined'||dragID==''){  
oldwin=obj.parentNode  
}  
else{  
oldwin=document.getElementById(dragID);  
}  
 
oldwin.style.left=pixParse(oldwin.style.left)+window.event.clientX-x;  
oldwin.style.top=pixParse(oldwin.style.top)+window.event.clientY-y;  
x=window.event.clientX;  
y=window.event.clientY;  
}  
}  
//將象素單位轉為數(shù)據(jù)129px-->129  
functionpixParse(str){  
strstr=str.replace('px','');  
returnparseInt(str);  
}  
//停止拖動  
functionstopDrag(obj){  
gMouseMove=false;  
obj.style.zIndex=z;//還原Z座標  
obj.releaseCapture();  
 
}  
 

 initPopUp()方法中增加了三個事件,如下：

<DIVclassDIVclass="x-window-headerx-unselectablex-window-draggable" 
id="ext-gen15"style="MozUserSelect:none;  
KhtmlUserSelect:none"unselectable="on" 
onMousedown="startDrag(this)"onMouseup="stopDrag(this)"  
onMousemove="Draging(this,\'ext-comp-1001\')"> 
 

【編輯推薦】

1. 學習筆記 剖析CSS縮寫六大規(guī)則
2. CSS樣式表特點及嵌入網頁的四種途徑
3. 三種方法實現(xiàn)CSS樣式表插入
4. CSS外邊距設置屬性margin用法
5. 探究CSS高級語法中選擇器分組和CSS繼承用法