JavaScript 實現(xiàn)模態(tài)對話框源代碼大全

更新時間：2009年05月02日 12:18:41 作者：

對話框在Windows應(yīng)用程序中使用非常普遍，許多應(yīng)用程序的設(shè)定，與用戶交互需要通過對話框來進(jìn)行，因此對話框是Windows應(yīng)用程序中最重要的界面元素之一，是與用戶交互的重要手段。

首先，來說一下對話框：
對話框在Windows應(yīng)用程序中使用非常普遍，許多應(yīng)用程序的設(shè)定，與用戶交互需要通過對話框來進(jìn)行，因此對話框是Windows應(yīng)用程序中最重要的界面元素之一，是與用戶交互的重要手段。對話框是一個特殊的窗口，任何對窗口進(jìn)行的操作（如移動、最大化、最小化等）也可以在對話框?qū)嵤?
對話框大致可以分為以下兩種：
（1）模態(tài)對話框：模態(tài)對話框彈出后，獨(dú)占了系統(tǒng)資源，用戶只有在關(guān)閉該對話框后才可以繼續(xù)執(zhí)行，不能夠在關(guān)閉對話框之前執(zhí)行應(yīng)用程序其他部分的代碼。模態(tài)對話框一般要求用戶做出某種選擇。
（2）非模態(tài)對話框：非模態(tài)對話框彈出后，程序可以在不關(guān)閉該對話框的情況下繼續(xù)執(zhí)行，在轉(zhuǎn)入到應(yīng)用程序其他部分的代碼時可以不需要用戶做出響應(yīng)。非模態(tài)對話框一般用來顯示信息，或者實時地進(jìn)行一些設(shè)置。
模態(tài)窗口在傳統(tǒng)編程語言中很常見，簡單的說就是，如果是模態(tài)的，就是打開一個子窗口，如果這個子窗口不關(guān)閉，就不能操作它的父窗口，原來程序暫停執(zhí)行，直到這個模態(tài)窗口關(guān)閉后才回到原來程序繼續(xù)。
非模態(tài)的就是直接顯示出來，然后原來的程序繼續(xù)執(zhí)行下面的語句，而且其他窗口也呈可用狀態(tài)。
模態(tài)對話框獨(dú)占了用戶的輸入，當(dāng)一個模態(tài)對話框打開時，用戶只能與該對話框進(jìn)行交互，而其他用戶界面對象收不到輸入信息。應(yīng)用程序用到的大部分對話框都是模態(tài)對話框。
通常瀏覽器中windwo.open或超鏈接彈出的新窗口就是非模式窗口,而模式窗口是類似alert那種必須關(guān)閉才能響應(yīng)其他事件的窗口。
明白了對話框的模態(tài)和非模態(tài)，來看下邊在B/s結(jié)構(gòu)應(yīng)用程序的開發(fā)中,有時我們會希望使用者按下按鈕后開啟一個保持在原窗口前方的子窗口,
在IE中,我們可以使用window.showModelessDialog()方法用來創(chuàng)建一個顯示HTML內(nèi)容的非模態(tài)對話框。window.showModalDialog()方法用來創(chuàng)建一個顯示HTML內(nèi)容的模態(tài)對話框，由于是對話框，因此它并沒有一般用window.open()打開的窗口的所有屬性。
這里是window.showModalDialog彈出窗口的一個實例函數(shù):

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

<script type="text/javascript"><!-- 
function openWin(src, width, height, showScroll){ 
window.showModalDialog 
(src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeig 
ht:"+height+";scroll:"+showScroll+";"); 
} 
// --></script>

例：

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

<span style="CURSOR: pointer" style="CURSOR: pointer" onclick="openWin 
('http://m.dhdzp.com', '500px', '400px', 'no')">點(diǎn)擊</span> 

需要注意的是FireFox瀏覽器中不支持showmodaldialog() ，這是因為在最初MozillaSuite 中（Firefox 是從這個套件衍生），是支持 showmodaldialog()的，不過后來發(fā)現(xiàn) showmodaldialog() 存在安全隱患，不久后就取消了對showmodaldialog() 的支持，這個事情還發(fā)生在 bug 194404 提交前。在想出更好的解決方案前，相信 Firefox 是不會提供對 showmodaldialog() 的支持的。

打開彈窗只能使用window.open實現(xiàn)這樣的功能，window.open的語法如下 :
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

只是,在Firefox下,window.open的參數(shù)中,sFeature多了一些功能設(shè)定,要讓FireFox下開啟的窗口跟IE的showModalDialog一樣的話, 只要在sFeatures中加個modal=yes就可以了,也許可能是出于安全考慮modal=yes，打開的并不是模式窗口，范例如下:

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

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

由于在firefox沒有showModalDialog方法。則用如下判斷來兼容兩種瀏覽器：

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

<input type="button" value="打開對話框" onclick="showDialog('#')"/> 
<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function showDialog(url) 
{ 
if( document.all ) //IE 
{ 
feature="dialogWidth:300px;dialogHeight:200px;status:no;help:no"; 
window.showModalDialog(url,null,feature); 
} 
else 
{ 
//modelessDialog可以將modal換成dialog=yes 
feature ="width=300,height=200,menubar=no,toolbar=no,location=no,"; 
feature+="scrollbars=no,status=no,modal=yes"; 
window.open(url,null,feature); 
} 
} 
//--> 
</SCRIPT> 

二、JavaScript+div實現(xiàn)模態(tài)對話框：

一個類似163郵箱對話框的功能。主要是2個層來完成這個效果，第一就是用來鎖住下面整個頁面的層，要有透明的效果，可以用filter:alpha(opacity=50)。還有一個層是用來顯示對話框內(nèi)容的，所以zIndex參數(shù)一定要設(shè)置的比鎖頻層高。

對話框的CSS可以自己定義一下，要注意的是，CSS中body一定要定義margin:0，否則鎖頻時，會出現(xiàn)空隙，而產(chǎn)生鎖頻不完整的問題，還有一個就是Select這個控件的問題，因為在IE里，他的zIndex很高，所以鎖頻層蓋不住他，這里可以用兩種辦法，一種是把他隱藏掉，一種可以把他的disabled屬性設(shè)置為false，第二種方法只能禁止編輯它，但是還是會在鎖頻層上當(dāng)，效果不佳，還是隱藏掉比較好。

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

<html> 
<title>`````</title> 
<head> 
<meta name="keywords" content="51windows.Net"> 
<meta http-equiv=content-type content="text/html; charset=gb2312"> 
<script type="text/javascript"><!-- 
var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH; 
function StrCode(str) 
{ 
if(encodeURIComponent) 
return encodeURIComponent(str); 
if(escape) 
return escape(str); 
} 

function Browser() 
{ 
var ua, s, i; 
this.isIE = false; 
this.isNS = false; 
this.isOP = false; 
this.isSF = false; 
ua = navigator.userAgent.toLowerCase(); 
s = "opera"; 
if ((i = ua.indexOf(s)) >= 0) 
{ 
this.isOP = true;return; 
} 
s = "msie"; 
if ((i = ua.indexOf(s)) >= 0) 
{ 
this.isIE = true; 
return; 
} 
s = "netscape6/"; 
if ((i = ua.indexOf(s)) >= 0) 
{ 
this.isNS = true; 
return; 
} 

s = "gecko"; 
if ((i = ua.indexOf(s)) >= 0) 
{ 
this.isNS = true; 
return; 
} 

s = "safari"; 
if ((i = ua.indexOf(s)) >= 0) 
{ 
this.isSF = true; 
return; 
} 
} 

function DialogShow(showdata,ow,oh,w,h) 
{ 
var objDialog = document.getElementById("DialogMove"); 
if (!objDialog) 
objDialog = document.createElement("div"); 
t_DiglogW = ow; 
t_DiglogH = oh; 
DialogLoc(); 
objDialog.id = "DialogMove"; 
var oS = objDialog.style; 
oS.display = "block"; 
oS.top = t_DiglogY + "px"; 
oS.left = t_DiglogX + "px"; 
oS.margin = "0px"; 
oS.padding = "0px"; 
oS.width = w + "px"; 
oS.height = h + "px"; 
oS.position = "absolute"; 
oS.zIndex = "5"; 
oS.background = "#FFF"; 
oS.border = "solid #000 1px"; 
objDialog.innerHTML = showdata; 
document.body.appendChild(objDialog); 
} 

function DialogHide() 
{ 
ScreenClean(); 
var objDialog = document.getElementById("DialogMove"); 
if (objDialog) 
objDialog.style.display = "none"; 
} 

function DialogLoc() 
{ 
var dde = document.documentElement; 
if (window.innerWidth){ 
var ww = window.innerWidth; 
var wh = window.innerHeight; 
var bgX = window.pageXOffset; 
var bgY = window.pageYOffset; 
}else{ 
var ww = dde.offsetWidth; 
var wh = dde.offsetHeight; 
var bgX = dde.scrollLeft; 
var bgY = dde.scrollTop; 
} 
t_DiglogX = (bgX + ((ww - t_DiglogW)/2)); 
t_DiglogY = (bgY + ((wh - t_DiglogH)/2)); 
} 

function ScreenConvert(){ 
var browser = new Browser(); 
var objScreen = document.getElementById("ScreenOver"); 
if(!objScreen) 
var objScreen = document.createElement("div"); 
var oS = objScreen.style; 
objScreen.id = "ScreenOver"; 
oS.display = "block"; 
oS.top = oS.left = oS.margin = oS.padding = "0px"; 
if (document.body.clientHeight) { 
var wh = document.body.clientHeight + "px"; 
}else if (window.innerHeight){ 
var wh = window.innerHeight + "px"; 
}else{ 
var wh = "100%"; 
} 
oS.width = "100%"; 
oS.height = wh; 
oS.position = "absolute"; 
oS.zIndex = "3"; 
if ((!browser.isSF) && (!browser.isOP)){ 
oS.background = "#cccccc"; 
}else{ 
oS.background = "#cccccc"; 
} 

oS.filter = "alpha(opacity=50)"; 
oS.opacity = 40/100; 
oS.MozOpacity = 40/100; 
document.body.appendChild(objScreen); 
var allselect = document.getElementsByTagName("select"); 
for (var i=0; i<allselect.length; i++) 
allselect[i].style.visibility = "hidden"; 
} 

function ScreenClean() 
{ 
var objScreen = document.getElementById("ScreenOver"); 
if (objScreen) 
objScreen.style.display = "none"; 
var allselect = document.getElementsByTagName("select"); 
for (var i=0; i<allselect.length; i++) 
allselect[i].style.visibility = "visible"; 
} 

function Demo(string) 
{ 
ScreenConvert(); 
var ShowDiv="<div style="\" style="\""padding:10px;\">"+string+" <br /><br /><input type=\"button\" onclick=\"DialogHide();\" value=\" 關(guān)閉 \"></div>"; 
DialogShow(ShowDiv,250,120,300,100); 
} 
// --></script> 
<style><!-- 
body{margin:0} 
--></style><style bogus="1">body{margin:0}</style> 
</head> 
<body> 
<div style="border:1px solid;width:100%"> 
<div> 
<input type="button" value="顯示對話框" onclick="javascript:Demo('o(∩_∩)o...哈哈!');"> 
<select name=""><option value="" selected>1</option><option value="">2</option><option value="">2</option><option value="">2</option><option 

value="">2</option></select> 
<input type="text" name="" value="aaa"> 
<input type="radio" name="">11 <input type="checkbox" name="">22 <input type="password" name="" value="aaa"> 
</div> 
</body> 
</html> 

三、Javascript模態(tài)對話框取父頁的值
1. a.htm 父頁
有 window.showModalDialog("b.htm");
有 Html元素 <input type="text" id="t1" name="t1" value="value">
2.b.htm 彈出頁面
能否在 b.htm 上取到 a.htm 中 t1值 ?
回答:
在a.html中設(shè)置
var results = window.showModalDialog("b.html");
(results){alert(results["key"]);}
在b.html中
<script>
window.Value={key:"返回到父頁面"}
</script>
四、模態(tài)對話框模仿MessageBox

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>模態(tài)對話框</title> </head> <body> <div> <hr> </div> <!--對話框相關(guān)HTML代碼--> <table width="100%" height="100%" id="cover" style="position:absolute;top:0px;left:0px;display:none;background-color:#666666;" onselectstart="javascript:return false;"> <tr> <td id="dlg" width="100%" height="100%" align="center" valign="center"> </td> </tr> </table> <script type="text/javascript" language="javascript"><!-- 
//按鈕類型 var MB_OK = 1; var MB_CANCEL = 2; var MB_YES = 4; var MB_NO = 8; /*================================================================================*/ /*================================================================================*/ //MessageBox類 //因為利用層不可能實現(xiàn)真正模態(tài)對話框，用戶仍然可以點(diǎn)擊對話框以外的區(qū)域，所以需要一個覆蓋框－coverIdStr //另一方面為了承載對話框，需要dlgIdStr function CMessageBox(coverIdStr, dlgIdStr) { this.coverIdStr = coverIdStr; this.coverId = document.getElementById(this.coverIdStr); this.dlgIdStr = dlgIdStr; this.dlgId = document.getElementById(this.dlgIdStr); this.dlgCaptionId = null; this.dlgInfoId = null; this.dlgButtonsId = null; this.caption = ""; this.info = ""; this.buttons = MB_OK; this.returnValue = 0; //返回值，0表示不確定，其它值可能是MB_OK、MB_CANCEL、MB_YES、MB_NO this.DoModal = DoModal; this.IniDlg = IniDlg; this.ShowDlg = ShowDlg; } //caption 對話框標(biāo)題 //info 對話框內(nèi)容，HTML無效 //buttons 對話框按鈕，使用一個按鈕類型值或多個按鈕類型值相加（但不能重復(fù)相加），HTML有效 //objNameStr CMessageBox對象名稱 function DoModal(caption, info, buttons, objNameStr) { this.dlgId.innerHTML = "<div style="\" style="\""padding:0px;width:300px;background-color:buttonface;filter:alpha(opacity=100);" + "border-top:buttonhighlight 2px solid;" + "border-right:buttonshadow 2px solid;" + "border-bottom:buttonshadow 2px solid;" + "border-left:buttonhighlight 2px solid;" + "cursor:default;\" onselectstart=\"javascript:return false;\">" + " <div id=\"" + this.dlgIdStr + "_caption\" style="\" style="\""padding:2px;width:100%;background-color:#000066;text-align:left;color:#FFFFFF;\" onselectstart=\"javascript:return false;\"></div>" + " <div id=\"" + this.dlgIdStr + "_info\" style="\" style="\""padding:10px;width:100%;background-color:buttonface;text-align:center;color:#000000;\" onselectstart=\"javascript:return false;\"></div>" + " <div id=\"" + this.dlgIdStr + "_buttons\" style="\" style="\""padding:10px;width:100%;background-color:buttonface;text-align:center;color:#000000;\" onselectstart=\"javascript:return false;\"></div>" + "</div>"; this.dlgCaptionId = document.getElementById(this.dlgIdStr + "_caption"); this.dlgInfoId = document.getElementById(this.dlgIdStr + "_info"); this.dlgButtonsId = document.getElementById(this.dlgIdStr + "_buttons"); this.IniDlg(caption, info, buttons, objNameStr); this.ShowDlg(true); } //初始化對話框 function IniDlg(caption, info, buttons, objNameStr) { this.dlgCaptionId.innerText = caption; this.dlgInfoId.innerHTML = info; this.dlgButtonsId.innerHTML = ""; if (parseInt(buttons/8) == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\"　否　\"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_NO);OnDlgReturn('" + objNameStr + "', MB_NO);\"> " + this.dlgButtonsId.innerHTML;//前后空格，避免各個按鈕之間離得太近 buttons -= 8; } if (parseInt(buttons/4) == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\"　是　\"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_YES);OnDlgReturn('" + objNameStr + "', MB_YES);\"> " + this.dlgButtonsId.innerHTML; buttons -= 4; } if (parseInt(buttons/2) == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\" 取 消 \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_CANCEL);OnDlgReturn('" + objNameStr + "', MB_CANCEL);\"> " + this.dlgButtonsId.innerHTML; buttons -= 2; } if (buttons == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\" 確 定 \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_OK);OnDlgReturn('" + objNameStr + "', MB_OK);\"> " + this.dlgButtonsId.innerHTML; } } //顯示、隱藏對話框，并確定是點(diǎn)擊哪個按鈕關(guān)閉對話框的 //display為true－顯示 //display為false－隱藏 function ShowDlg(display, returnValue) { if (display) { ReSizeDlg(); this.coverId.style.display = "block"; } else { this.coverId.style.display = "none"; } this.returnValue = returnValue; } /*================================================================================*/ /*================================================================================*/ //對話框返回函數(shù) //自行修改函數(shù)代碼 function OnDlgReturn(objNameStr, returnValue) { alert("CMessageBox 對象 " + objNameStr + " 的返回值是" + returnValue); } //保持cover框覆蓋整個客戶區(qū) //保持對話框在預(yù)期位置 //如果覆蓋框id不為cover，則需要手動修改此函數(shù)。 //document.body.onscroll和document.body.onresize觸發(fā)本函數(shù) //同時此函數(shù)也被CMessageBox調(diào)用 function ReSizeDlg() { var cover = document.getElementById("cover"); cover.style.pixelTop = document.body.scrollTop; cover.style.pixelLeft = document.body.scrollLeft; cover.style.width = document.body.clientWidth; cover.style.height = document.body.clientHeight; } document.body.onscroll = ReSizeDlg; document.body.onresize = ReSizeDlg; /*================================================================================*/ /*================================================================================*/ var objDlg = new CMessageBox("cover", "dlg"); var objDlg2 = new CMessageBox("cover", "dlg"); 
// --></script> <input type="button" value="點(diǎn)我" onclick="javascript:objDlg.DoModal('注意', '吃飯了', MB_OK, 'objDlg');"> <input type="button" value="然后點(diǎn)我" onclick="javascript:objDlg2.DoModal('注意', '吃飯了？', MB_YES+MB_NO, 'objDlg2');"> </body> </html>

五、showModalDialog 打開的模態(tài)對話框有不少經(jīng)典的缺陷，解決辦法

showModalDialog 打開的模態(tài)對話框有不少經(jīng)典的缺陷，在這里不再冗述，我只談?wù)勛罱龅降膸讉€問題以及解決辦法。

問題1. showModalDialog 打開一個 aspx 頁面時，如果該頁面在之前已經(jīng)打開過一次，則自動會加載緩存中的頁面，而不能顯示最新數(shù)據(jù)。

解決的辦法有兩種：

(1). 在打開模態(tài)框時，給 url 后面多加一個隨機(jī)參數(shù)，來避免頁面被緩存：

var url = 'EditFlowNode.aspx?flowId=0&id=2&x=' + Math.random();
var result = window.showModalDialog(url, '', 'status:no; help:no;');

(2). 在該 asp.net 頁面的 Page_Load 方法里設(shè)定不緩存：

protected void Page_Load(object sender, EventArgs e){
    Response.Expires = 0;
    Response.Cache.SetNoStore();
    Response.AppendHeader("Pragma", "no-cache");
}

問題2. 模態(tài)對話框中的內(nèi)容和腳本加載次序不同，導(dǎo)致的問題。

緣起：考慮如下頁面的代碼

這個頁面，如果在普通的 IE 窗口中加載時，提示的信息是 "155"，而在模態(tài)對話框中執(zhí)行時，其數(shù)值是 "0"。為什么會這樣？

我們注意到普通窗口打開該頁面時，當(dāng)跳出 alert 對話框后，整個頁面元素都已經(jīng)正常顯示了；而模態(tài)框在打開時，跳出 alert 對話框后，其背景卻是一片空白；等點(diǎn)擊“確定”后，才會顯示出網(wǎng)頁內(nèi)容。
由此可以推測，模態(tài)框和普通頁面在解析執(zhí)行 HTML 時的次序不同：

普通頁面：依次解析 body 中的元素，并隨即繪制(render)解析完的元素。如果碰到 script, 則立刻執(zhí)行之。

模態(tài)對話框：依次解析 body 中的元素，但并未立即繪制(render)它們。如果碰到 script, 則立刻執(zhí)行之。等 body 都加載完畢后，再依次繪制其中的元素。

由于以上我們示例代碼中訪問到了 offsetWidth 屬性，而我們可以推知，該屬性一定是當(dāng)元素被繪制(render)完畢后，才會自動計算出有意義的數(shù)值。所以就導(dǎo)致了問題中看到的現(xiàn)象。

之所以考慮到這個問題，其實是因為我在模態(tài)對話框中使用一個第三方控件的時候，出現(xiàn)了 bug，經(jīng)過調(diào)試發(fā)現(xiàn)根源的原因在于該控件采用了常用的代碼模式來輸出其 HTML。也就是在一段 HTML 輸出后，緊接著輸出其初始化腳本。（這個問題值得 ASP.NET 控件開發(fā)者引起注意）

幸運(yùn)的是，我有這個控件的源代碼。因此修改源代碼解決了這個問題。我的解法類似于這樣：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
</head>

<body>
    <input id="txt1">
    <script type="text/javascript">
    
    </script>
</body>
</html>

六、使用div仿javascript模態(tài)窗口

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<style type="text/css"><!-- 
#id1{width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:49;display:none;} 
#id2{top:200px;position:absolute;z-index:50;display:none;border:3px solid #E5E5E5; left:100px;background-color:white;} 
--></style><style type="text/css" bogus="1">#id1{width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:49;display:none;} 
#id2{top:200px;position:absolute;z-index:50;display:none;border:3px solid #E5E5E5; left:100px;background-color:white;}</style> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>asfsdfasdfasdf</title> 
<script language="javascript" type="text/javascript"><!-- 
function show(){ 
id1.style.height=window.screen.height+"px"; 
id1.style.width=window.screen.width+"px"; 
id1.style.display='block'; 
id2.style.display='block' 
} 
function hide(){ 
id1.style.display='none' 
id2.style.display='none' 
} 
self.onError=null; 
currentX = currentY = 0; 
whichIt = null; 
lastScrollX = 0; lastScrollY = 0; 
NS = (document.layers) ? 1 : 0; 
IE = (document.all) ? 1: 0; 
<!-- STALKER CODE --> 
function heartBeat() { 
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } 
if(diffY != lastScrollY) { 
percent = .1 * (diffY - lastScrollY); 
if(percent > 0) percent = Math.ceil(percent); 
else percent = Math.floor(percent); 
if(IE) document.all.id2.style.pixelTop += percent; 
if(NS) document.id2.top += percent; 
lastScrollY = lastScrollY + percent; 
} 
if(diffX != lastScrollX) { 
percent = .1 * (diffX - lastScrollX); 
if(percent > 0) percent = Math.ceil(percent); 
else percent = Math.floor(percent); 
if(IE) document.all.id2.style.pixelLeft += percent; 
if(NS) document.id2.left += percent; 
lastScrollX = lastScrollX + percent; 
} 
} 
<!-- /STALKER CODE --> 
<!-- DRAG DROP CODE --> 
function checkFocus(x,y) { 
stalkerx = document.id2.pageX; 
stalkery = document.id2.pageY; 
stalkerwidth = document.id2.clip.width; 
stalkerheight = document.id2.clip.height; 
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true; 
else return false; 
} 
function grabIt(e) { 
if(IE) { 
whichIt = event.srcElement; 
while (whichIt.id.indexOf("id2") == -1) { 
whichIt = whichIt.parentElement; 
if (whichIt == null) { return true; } 
} 
whichIt.style.pixelLeft = whichIt.offsetLeft; 
whichIt.style.pixelTop = whichIt.offsetTop; 
currentX = (event.clientX + document.body.scrollLeft); 
currentY = (event.clientY + document.body.scrollTop); 
} else { 
window.captureEvents(Event.MOUSEMOVE); 
if(checkFocus (e.pageX,e.pageY)) { 
whichIt = document.id2; 
stalkerTouchedX = e.pageX-document.id2.pageX; 
StalkerTouchedY = e.pageY-document.id2.pageY; 
} 
} 
return true; 
} 
function moveIt(e) { 
if (whichIt == null) { return false; } 
if(IE) { 
newX = (event.clientX + document.body.scrollLeft); 
newY = (event.clientY + document.body.scrollTop); 
distanceX = (newX - currentX); distanceY = (newY - currentY); 
currentX = newX; currentY = newY; 
whichIt.style.pixelLeft += distanceX; 
whichIt.style.pixelTop += distanceY; 
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20; 
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; 
event.returnValue = false; 
} else { 
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY); 
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; 
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset; 
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17; 
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; 
return false;} 
return false; 
} 
function dropIt() { 
whichIt = null; 
if(NS) window.releaseEvents (Event.MOUSEMOVE); 
return true; 
} 
<!-- DRAG DROP CODE --> 
if(NS) { 
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); 
window.onmousedown = grabIt; 
window.onmousemove = moveIt; 
window.onmouseup = dropIt; 
} 
if(IE) { 
document.onmousedown = grabIt; 
document.onmousemove = moveIt; 
document.onmouseup = dropIt; 
} 
if(NS || IE) action = window.setInterval("heartBeat()",1) 
// --></script> 
</head> 

<body> 
<p> </p> 
<div id="id2"> 
這里可以放內(nèi)容，或者添加div用innerhtml進(jìn)行添加內(nèi)容就可以了 
<br/><input name="Button1" type="button" value="button" onclick="hide()"/> 
</div> 
<div id="id1"> 123</div> 

<form method="post"> 
    <input name="Button2" type="button" value="button" onclick="show()"/></form> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
<p> </p> 
</body> 

</html> 