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 arguments 多参传值函数
Oct 24 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
学习vue.js计算属性
Dec 03 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
通过javascript实现扫雷游戏代码实例
Feb 09 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
WebPack工具运行原理及入门教程
Dec 02 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
Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
2006/11/18 PHP
php zip文件解压类代码
2009/12/02 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
使用PHP强制下载PDF文件示例
2014/01/17 PHP
Codeigniter实现智能裁剪图片的方法
2014/06/12 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
parentElement,srcElement的使用小结
2014/01/13 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
Vue.js常用指令之循环使用v-for指令教程
2017/06/27 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
学习python的几条建议分享
2013/02/10 Python
python3中zip()函数使用详解
2018/06/29 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
详解Python3中ceil()函数用法
2019/02/19 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
澳大利亚天然护肤品、化妆品和健康产品一站式商店:Nourished Life
2018/12/02 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
华为c/c++笔试题
2016/01/25 面试题
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
餐饮业的创业计划书范文
2013/12/26 职场文书
关于期中考试的反思
2014/02/02 职场文书
销售经理岗位职责
2014/03/16 职场文书
六一儿童节主持词
2014/03/21 职场文书
环保倡议书50字
2014/05/15 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
党的群众路线教育实践活动对照检查材料
2014/09/22 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python