繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js实现简单模态窗口，背景灰显
- Javascript
- javascript进行客户端数据的校验
- javascript中如何实现浏览器上的右键菜单
- 用javascript使链接按钮不断变化
- 利用javascript制作倒计时牌
- 用javascript实现变色背景和文字
- 让弹出窗口变得“体贴”一些(javascript)
- javascript实例教程(1) 创建弹出式窗口
- javascript实例教程(2) 创建折叠式导航菜单
- javascript实例教程(3) 探测浏览器插件
- javascript实例教程(4) 探测浏览器插件
- javascript实例教程(5) 在一个表单中设置和检查Cookies
- javascript实例教程(6) 利用javascript进行密码保护
- javascript实例教程(7) 利用javascript基于浏览器类型的重定向
- javascript实例教程(8) 检验表单有效性
- javascript实例教程(9) 随机显示图片
- javascript实例教程(10) 创建后退按钮
- javascript实例教程(11) 隐藏script代码
- javascript实例教程(12) 鼠标移过时报警
- javascript实例教程(13) 鼠标触发窗口
- javascript实例教程(14) JS代替CGI
Javascript 中的 js实现简单模态窗口，背景灰显
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 303 ::
收藏到网摘: n/a
昨天中午做项目需要一个模态窗口，想起上一个公司的项目经理曾经做过一个比较牛的模态窗口，至今没用搞清楚实现原理，平时也没有时间去分析，试着自己做了一个，用了一天的时间终于完成了，给大家一起分享， 也希望高手多提意见。第一次在博客园上发文章，挺高兴的。 没什么好说的，都是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" 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 />
我来了！<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>
在线演示 http://img.ruanchen.com/nline/ModeWindow/index.htm
评论 (0) All
