快捷導(dǎo)航

js實(shí)現(xiàn)簡(jiǎn)單模態(tài)窗口，背景灰顯

更新時(shí)間：2008年11月14日 23:45:24 作者：

昨天中午做項(xiàng)目需要一個(gè)模態(tài)窗口，想起上一個(gè)公司的項(xiàng)目經(jīng)理曾經(jīng)做過(guò)一個(gè)比較牛的模態(tài)窗口，至今沒(méi)用搞清楚實(shí)現(xiàn)原理，平時(shí)也沒(méi)有時(shí)間去分析，試著自己做了一個(gè)，用了一天的時(shí)間終于完成了，給大家一起分享，也希望高手多提意見(jiàn)。第一次在博客園上發(fā)文章，挺高興的。

沒(méi)什么好說(shuō)的，都是js，用一個(gè)iframe將頁(yè)面遮擋，iframe上面一個(gè)div層，js面向?qū)ο笞龅模渲杏胁糠质莏s動(dòng)態(tài)生成style。
ModeWindow.js

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

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>Untitled Page</title> 
<script src="ModeWindow.js"></script> 
<script language="javascript" type="text/javascript"> 
var myWin; 
function show1(){ 
var divtest = document.getElementById("divtest"); 
divtest.style.display="block"; 
myWin = new ModeWindow(divtest,200,300,300,100,"i change!"); 
myWin.show(); 
} 
function show2(){ 
var tbtest = document.getElementById("tbtest"); 
tbtest.style.display="block"; 
//myWin = new ModeWindow(tbtest); 
myWin = new ModeWindow(tbtest,200,200,200,222,"hello world!"); 
myWin.show(); 
} 
function Winclose() 
{ 
myWin.close(); 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<table id="tbtest" style="display: none"> 
<tr> 
<td style="width: 100px"> 
<input id="Text6" type="text" /></td> 
<td style="width: 100px"> 
<input type="button" onclick="Winclose()" value="close" /></td> 
</tr> 
</table> 
<div id="divtest" style="display: none"> 
<br /> 
<br /> 
我來(lái)了！<input type="button" onclick="Winclose()" value="close" /> 
</div> 
<div align="center"> 
<table width="800" height="500"> 
<tr> 
<td style="width: 100px"> 
<input id="Text2" type="text" /></td> 
<td style="width: 100px"> 
<input id="Text1" type="text" /></td> 
<td style="width: 100px"> 
<input id="Text3" type="text" /></td> 
<td style="width: 100px"> 
<input id="Text4" type="text" /></td> 
<td style="width: 100px"> 
<input id="Text5" type="text" /></td> 
</tr> 
<tr> 
<td style="width: 100px"> 
<input type="button" onclick="show2()" value="open table" /></td> 
<td style="width: 100px"> 
<input type="button" onclick="show2()" value="open table" /></td> 
<td style="width: 100px"> 
<input type="button" onclick="show2()" value="open table" /></td> 
<td style="width: 100px"> 
<input type="button" onclick="show1()" value="open div" /></td> 
<td style="width: 100px"> 
<input type="button" onclick="show1()" value="open div" /></td> 
</tr> 
</table> 
</div> 
</form> 
</body> 
</html> 