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

时间：2021-06-02 08:22:17|栏目：JavaScript代码|点击：次

没什么好说的，都是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.jb51.net/online/ModeWindow/index.htm

上一篇：纯JavaScript 实现flappy bird小游戏实例代码

栏目：JavaScript代码

下一篇：Swiper 4.x 使用方法(移动端网站的内容触摸滑动)

本文标题：js实现简单模态窗口，背景灰显

本文地址：http://www.codeinn.net/misctech/133792.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程