js实现简单模态窗口,背景灰显


Posted in Javascript onNovember 14, 2008

没什么好说的,都是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.3water.com/online/ModeWindow/index.htm
Javascript 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
node.js中的fs.read方法使用说明
Dec 17 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 #Javascript
javascript 出生日期和身份证判断大全
Nov 13 #Javascript
Ajax,UTF-8还是GB2312 eval 还是execScript
Nov 13 #Javascript
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 #Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 #Javascript
javascript vvorld 在线加密破解方法
Nov 13 #Javascript
javascript css float属性的特殊写法
Nov 13 #Javascript
You might like
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
用户注册常用javascript代码
2009/08/29 Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
js鼠标点击事件在各个浏览器中的写法及Event对象属性介绍
2013/01/24 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
微信小程序的开发范式BeautyWe.js入门详解
2019/07/10 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
django接入新浪微博OAuth的方法
2015/06/29 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
Python如何爬取微信公众号文章和评论(基于 Fiddler 抓包分析)
2019/06/28 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
在python中求分布函数相关的包实例
2020/04/15 Python
python中format函数如何使用
2020/06/22 Python
Python logging模块原理解析及应用
2020/08/13 Python
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
英文简历中的自我评价
2013/10/06 职场文书
仓库保管员岗位职责
2013/12/20 职场文书
开办加工厂创业计划书
2014/01/03 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
代办委托书怎样写
2014/04/08 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
小学数学教学随笔
2015/08/14 职场文书