快捷導(dǎo)航

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

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

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

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

需要注意的是FireFox瀏覽器中不支持showmodaldialog() ，這是因?yàn)樵谧畛鮉ozillaSuite 中（Firefox 是從這個(gè)套件衍生），是支持 showmodaldialog()的，不過后來(lái)發(fā)現(xiàn) showmodaldialog() 存在安全隱患，不久后就取消了對(duì)showmodaldialog() 的支持，這個(gè)事情還發(fā)生在 bug 194404 提交前。在想出更好的解決方案前，相信 Firefox 是不會(huì)提供對(duì) showmodaldialog() 的支持的。

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

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

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

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

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

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

<input type="button" value="打開對(duì)話框" 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實(shí)現(xiàn)模態(tài)對(duì)話框：

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

對(duì)話框的CSS可以自己定義一下，要注意的是，CSS中body一定要定義margin:0，否則鎖頻時(shí)，會(huì)出現(xiàn)空隙，而產(chǎn)生鎖頻不完整的問題，還有一個(gè)就是Select這個(gè)控件的問題，因?yàn)樵贗E里，他的zIndex很高，所以鎖頻層蓋不住他，這里可以用兩種辦法，一種是把他隱藏掉，一種可以把他的disabled屬性設(shè)置為false，第二種方法只能禁止編輯它，但是還是會(huì)在鎖頻層上當(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="顯示對(duì)話框" 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)對(duì)話框取父頁(yè)的值
1. a.htm 父頁(yè)
有 window.showModalDialog("b.htm");
有 Html元素 <input type="text" id="t1" name="t1" value="value">
2.b.htm 彈出頁(yè)面
能否在 b.htm 上取到 a.htm 中 t1值 ?
回答:
在a.html中設(shè)置
var results = window.showModalDialog("b.html");
(results){alert(results["key"]);}
在b.html中
<script>
window.Value={key:"返回到父頁(yè)面"}
</script>
四、模態(tài)對(duì)話框模仿MessageBox

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>模態(tài)對(duì)話框</title> </head> <body> <div> <hr> </div> <!--對(duì)話框相關(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類 //因?yàn)槔脤硬豢赡軐?shí)現(xiàn)真正模態(tài)對(duì)話框，用戶仍然可以點(diǎn)擊對(duì)話框以外的區(qū)域，所以需要一個(gè)覆蓋框－coverIdStr //另一方面為了承載對(duì)話框，需要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 對(duì)話框標(biāo)題 //info 對(duì)話框內(nèi)容，HTML無(wú)效 //buttons 對(duì)話框按鈕，使用一個(gè)按鈕類型值或多個(gè)按鈕類型值相加（但不能重復(fù)相加），HTML有效 //objNameStr CMessageBox對(duì)象名稱 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); } //初始化對(duì)話框 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;//前后空格，避免各個(gè)按鈕之間離得太近 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; } } //顯示、隱藏對(duì)話框，并確定是點(diǎn)擊哪個(gè)按鈕關(guān)閉對(duì)話框的 //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; } /*================================================================================*/ /*================================================================================*/ //對(duì)話框返回函數(shù) //自行修改函數(shù)代碼 function OnDlgReturn(objNameStr, returnValue) { alert("CMessageBox 對(duì)象 " + objNameStr + " 的返回值是" + returnValue); } //保持cover框覆蓋整個(gè)客戶區(qū) //保持對(duì)話框在預(yù)期位置 //如果覆蓋框id不為cover，則需要手動(dòng)修改此函數(shù)。 //document.body.onscroll和document.body.onresize觸發(fā)本函數(shù) //同時(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)對(duì)話框有不少經(jīng)典的缺陷，解決辦法

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

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

解決的辦法有兩種：

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

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

(2). 在該 asp.net 頁(yè)面的 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)對(duì)話框中的內(nèi)容和腳本加載次序不同，導(dǎo)致的問題。

緣起：考慮如下頁(yè)面的代碼

<!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>

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

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

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

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

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

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

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

<!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> 