兩種方式解決DIV彈出窗口問題
本文向大家描述一下如何***實現(xiàn)DIV彈出層功能，這里有二種方式處理DIV彈出窗口，一種是用JavaScript代碼，另一種是用樣式，具體內(nèi)容請看本文詳細介紹，相信本文介紹一定會讓你有所收獲。
***實現(xiàn)DIV彈出層功能
要想***實現(xiàn)DIV彈出層功能，這里推薦一個輕量級JavaScript工具：subModal（包括圖片和樣式僅8KB左右，JavaScript文件4.27KB），subModal實現(xiàn)用DIV模擬的模式DIV彈出窗口，非常漂亮且簡單實用。其中發(fā)表評論窗口就是DIV彈出窗口樣式。
下面將介紹此JavaScript工具的使用：
在開始使用之前需要下載文件：
已經(jīng)整理后的版本：subModal
原始版本（英文）：http://gabrito.com/files/subModal/可以在此頁面查看運行效果。頁面引用相關(guān)文件。在需要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為當窗口彈出后的回調(diào)函數(shù)。其中高寬以像素為單位，例如：
<!–以下代碼將會在彈出DIV彈窗，彈窗中頁面為modalcontent.html,彈窗的寬度為400像素，高度為200像素–>
viewsourceprint?
- 1.<p><buttononclickbuttononclick=
- "showPopWin('modalcontent.html',400,200,null);">
- showmodalwindowbutton</button></p>
◆用樣式:
subModal支持設(shè)置特別的樣式來完成DIV彈出窗口的功能。當鏈接上設(shè)置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>
關(guān)閉彈出可以在當前頁碼調(diào)用hidePopWin()函數(shù)或者在彈出頁面中調(diào)用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();//設(shè)置屬于當前對象的鼠標捕捉
- 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;
- }
- }
- //將象素單位轉(zhuǎn)為數(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\')">
【編輯推薦】
- 學習筆記 剖析CSS縮寫六大規(guī)則
- CSS樣式表特點及嵌入網(wǎng)頁的四種途徑
- 三種方法實現(xiàn)CSS樣式表插入
- CSS外邊距設(shè)置屬性margin用法
- 探究CSS高級語法中選擇器分組和CSS繼承用法
