浏览器中蒙板层弹出窗口

最新推荐文章于 2022-01-21 14:39:39 发布

lzquan2010

最新推荐文章于 2022-01-21 14:39:39 发布

阅读量129

点赞数

分类专栏： JS 文章标签：浏览器 JavaScript XHTML CSS Flash ViewUI

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#Layer1 {
	position:absolute;
	display:none;
	left:492px;
	top:30px;
	width:267px;
	background-color:#000000;
	height:355px;
	z-index:2;
}
#Layer2 {
	position:absolute;
	display:none;
	left:4px;
	top:1px;
	filter:alpha(opacity=50); 
	opacity: 0.5; 
	-moz-opacity:0.5; 
	-khtml-opacity: 0.5; 
	width:20000px;
	height:2000px;
	background-color:#999999;
	z-index:1;
}
</style>

<script type="text/javascript">
	function showDiv(){
		var lay1 = document.getElementById('Layer1');
		var lay2 = document.getElementById('Layer2');
		lay1.style.display = 'block';
		lay2.style.display = 'block';
	}
	
	function closeDiv(){
		var lay1 = document.getElementById('Layer1');
		var lay2 = document.getElementById('Layer2');
		lay1.style.display = 'none';
		lay2.style.display = 'none';
	}

</script>

</head>

<body>

<div id="Layer1">
	<form action="">
		<input type="text" />
		<input type="button" value="close div" οnclick="return closeDiv();" />
		<input type="submit" />
	</form>
</div>

<div id="Layer2"></div>


 
		<table width="100%" border="0" cellpadding="0" cellspacing="0">
		  <tr>
			<td width="54%"><p>&nbsp;</p>
		    <p>&nbsp;</p>
		    <p>flash</p>
		    <p>&nbsp;</p></td>
		    <td width="46%">asdf</td>
		  </tr>
		  <tr>
			<td colspan="2">标题</td>
		  </tr>
		  <tr>
			<td colspan="2"><input type="button" value="showdiv" οnclick="return showDiv();" /></td>
		  </tr>
		</table>
 


</body>
</html>