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 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
JS实现复制功能
Mar 01 Javascript
详解在React中跨组件分发状态的三种方法
Aug 09 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
详解Vue组件之间通信的七种方式
Apr 14 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
Vue路由前后端设计总结
Aug 06 Javascript
Vuex的实战使用详解
Oct 31 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计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
php经典算法集锦
2015/11/14 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
2013/08/07 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
js实现右键菜单功能
2016/11/28 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
mui上拉加载功能实例详解
2017/04/13 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
JavaScript你不知道的一些数组方法
2017/08/18 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
浅谈JS的原型和继承
2019/05/08 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
重命名批处理python脚本
2013/04/05 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
测试工程师岗位职责
2013/11/28 职场文书
战友聚会主持词
2014/04/02 职场文书
物理教育专业求职信
2014/06/25 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
新手初学Java List 接口
2021/07/07 Java/Android
Mysql数据库group by原理详解
2022/07/07 MySQL