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事件问题
Sep 05 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
如何用js控制frame的隐藏或显示的解决办法
Mar 20 Javascript
Vue.js第三天学习笔记(计算属性computed)
Dec 01 Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
Dec 18 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
深入浅出vue图片路径的实现
Sep 04 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
Jan 07 Javascript
vue 自定义组件的写法与用法详解
Mar 04 Javascript
创建与框架无关的JavaScript插件
Dec 01 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
Php中使用Select 查询语句的实例
2014/02/19 PHP
php常用字符函数实例小结
2016/12/29 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
php生成word并下载代码实例
2019/03/15 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
2016/10/17 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
Python Socket传输文件示例
2017/01/16 Python
利用Python代码实现数据可视化的5种方法详解
2018/03/25 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
python多进程使用函数封装实例
2020/05/02 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
德国旅游网站:weg.de
2018/06/03 全球购物
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫