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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
Mar 18 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
基于jQuery实现仿51job城市选择功能实例代码
Mar 02 Javascript
JS去除空格和换行的正则表达式(推荐)
Jun 14 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
Aug 01 Javascript
Angular 开发学习之Angular CLI的安装使用
Dec 31 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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
奇怪的PHP引用效率问题分析
2012/03/23 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
PHP CURL获取cookies模拟登录的方法
2013/11/04 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
javascript eval函数深入认识
2009/02/21 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
javascript实现网页字符定位的方法
2015/07/14 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
浅谈js的ajax的异步和同步请求的问题
2016/10/07 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
seajs和requirejs模块化简单案例分析
2019/08/26 Javascript
用原生JS实现爱奇艺首页导航栏代码实例
2019/09/19 Javascript
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python 多线程实例详解
2017/03/25 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
pandas计数 value_counts()的使用
2019/06/24 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
python中字符串的编码与解码详析
2020/12/03 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
世界最大的票务市场:viagogo
2017/02/16 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
物流专业大学的自我评价
2014/01/11 职场文书
十岁生日父母答谢词
2014/01/18 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
结婚典礼主持词
2015/06/29 职场文书
年终奖金发放管理制度,中小企业适用,拿去救急吧!
2019/07/12 职场文书