一个背景变灰的弹出框demo

最新推荐文章于 2024-07-03 16:33:21 发布

akwolf

最新推荐文章于 2024-07-03 16:33:21 发布

阅读量892

点赞数 1

分类专栏： Web 文章标签： input ie button class css html

本文链接：https://blog.csdn.net/akwolf/article/details/6834412

版权

Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

还是先来一张效果图更能说明问题。

为了简单起见把js，css的代码都放到一个文件中：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>alpha</title>
<style type="text/css">
	#overDiv{
		background-color: #000;
		width: 100%;
		height: 100%;
		left:0;
		top:0;/*FF IE7*/
		filter:alpha(opacity=40);/*IE*/
		opacity:0.4;/*FF*/
		z-index:1;
		
		position:fixed!important;/*FF IE7*/
		position:absolute;/*IE6*/
		
		_top:       expression(eval(document.compatMode &&
		            document.compatMode=='CSS1Compat') ?
		            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
		            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
		
	}
	
	#dlDiv{
		background-image:url(dlbj.jpg);
		background-repeat:repeat-x;
		border:2px solid #06F;
		z-index:2;
		width: 400px;
		height: 300px;
		left:43%;/*FF IE7*/
		top:37%;/*FF IE7*/
		
		margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
		margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
		
		margin-top:0px;
		
		position:fixed!important;/*FF IE7*/
		position:absolute;/*IE6*/
		
		_top:       expression(eval(document.compatMode &&
		            document.compatMode=='CSS1Compat') ?
		            documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
		            document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
	}
	
	.lobu{
		width:65px;
		height:25px;
		background:#FFFFFF;
		font-size:13px;
		border:#0099CC solid 1px;
	}
</style>
<script type="text/javascript">
	function show(){
		document.getElementById("overDiv").style.display = "block" ;
		document.getElementById("dlDiv").style.display = "block" ;
	}
	function closeDiv(){
		document.getElementById("overDiv").style.display = "none" ;
		document.getElementById("dlDiv").style.display = "none" ;
	}
</script>
</head>
<body>
	<div id="dlDiv" style="display:none;">
	<div id="dlTitle"></div>
	    <table width="250" height="136" border="0" cellpadding="0" cellspacing="0" align="center">
				  <tr>
					<td width="62" height="24" align="center">账　号:</td>
					<td colspan="2"><input type="text" class="input" id="code" onFocus="OnFocus()" value="" maxlength="50" /></td>
				  </tr>
				  <tr>
					<td height="24" align="center">密　码:</td>
					<td colspan="2">
						<input type="password" class="input" id="pass" onFocus="OnFocus()" maxlength="50" />
					</td>
				  </tr>
				  <tr>
					<td height="31" align="center">验证码:</td>
					<td width="124"><input type="text" id="rand" size="7" maxlength="4" onFocus="OnFocus()" class="check_code" width="50px;"/></td>
					<td width="134"><span id="CNumber" title="点击刷新验证码"><img src="" id="code" onClick="" width="50" height="30"/></span></td>
				  </tr>
				  <tr>
					<td height="28" align="center">角　色:</td>
					<td colspan="2" id="dljs"></td>
				  </tr>
				  <tr>
				  	<td height="28" align="center">平　台:</td>
					<td colspan="2">
					<select name="pt" id="pt">
						<option value="bx" selected="selected">不限平台</option>
					</select>
					</td>
				  </tr>
				  <tr>
				    <td colspan="3" align="left">
				    	<input type="button"  id="login" class="lobu" onClick="" value="登 录"> 　
				      	<input type="button" id="redo" class="lobu" onClick="closeDiv();" value="返 回">
					</td>
				  </tr>
	              <tr><td colspan="3"><div id="message"></div></td></tr>
			  </table>
	</div>
	<input type="button" οnclick="show()" value="背景变灰色">
	<div id="overDiv" style="display:none;"></div>
</body>
</html>

其中这个例子还用用到一个图片，在下面也直接贴出

-----------------><---------------------------