没什么好说的，都是js，用一个iframe将页面遮挡，iframe上面一个div层，js面向对象做的，其中有部分是js动态生成style。
ModeWindow.js
复制代码 代码如下:
<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">
<tr>
<td>
<input id="Text6" type="text" /></td>
<td>
<input type="button" value="close" /></td>
</tr>
</table>
<div id="divtest">
<br />
<br />
我来了！<input type="button" value="close" />
</div>
<div align="center">
<table width="800" height="500">
<tr>
<td>
<input id="Text2" type="text" /></td>
<td>
<input id="Text1" type="text" /></td>
<td>
<input id="Text3" type="text" /></td>
<td>
<input id="Text4" type="text" /></td>
<td>
<input id="Text5" type="text" /></td>
</tr>
<tr>
<td>
<input type="button" value="open table" /></td>
<td>
<input type="button" value="open table" /></td>
<td>
<input type="button" value="open table" /></td>
<td>
<input type="button" value="open div" /></td>
<td>
<input type="button" value="open div" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
在线演示 http://img.jb51.net/online/ModeWindow/index.htm
【js实现简单模态窗口，背景灰显】相关文章：
★ JavaScript实现单击下拉框选择直接跳转页面的方法