怎样写网络小说,好看的课外书

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案

兩種方式解決DIV彈出窗口問題

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

成都創(chuàng)新互聯(lián)公司是一家專注于網站設計制作、成都網站建設與策劃設計,寧都網站建設哪家好?成都創(chuàng)新互聯(lián)公司做網站,專注于網站建設10年,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:寧都等地區(qū)。寧都做網站價格咨詢:18982081108

***實現(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?

源代碼中的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ù)。其中高寬以像素為單位，例如：

viewsourceprint?

 
 
 
  
  
  1.
  
  
  
"showPopWin('modalcontent.html',400,200,null);">
  
  
  showmodalwindowbutton

◆用樣式:

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

例如：

viewsourceprint?

 
 
 
  
  
  1.
  
  
  showmodalwindowusingclass
  
  
  2.
  
  
  3. 
  
  
  4.
  
  
  showmodalwindowusingclassandoverridingdefaultsize
  
  
  5.

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

viewsourceprint?

 
 
 
  
  
  1.close

在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ù)據129px-->129 
  
  
  functionpixParse(str){ 
  
  
  strstr=str.replace('px',''); 
  
  
  returnparseInt(str); 
  
  
  } 
  
  
  //停止拖動 
  
  
  functionstopDrag(obj){ 
  
  
  gMouseMove=false; 
  
  
  obj.style.zIndex=z;//還原Z座標 
  
  
  obj.releaseCapture(); 
  
  
  
  
  
  }

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

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

文章名稱：兩種方式解決DIV彈出窗口問題
標題鏈接：http://m.fisionsoft.com.cn/article/cosecdo.html

新聞中心

其他資訊