柠檬铺

下面是整个页面的代码,总共分为CSS和Javascript和HTML三部份，复制后运行就可以 了，里面有个背景图要自己换掉。

#alertdiv{position:absolute; height:450px; width:400px; z-index:9999;left:50%;
margin-left:-200px; padding:1px; border:1px #ccc solid; font-size:12px;
display:none; background-color:#FFFFFF}
 
#alertdiv h2{ position:relative; height:23px; background-color:#E4E4E4;
font-size:12px;padding:0; padding-left:5px; line-height:23px; margin:0; }
 
#alertdiv h2 a{position:absolute; display:block;right:5px; top:3px;display:block;
margin:0; width:16px; height:16px; margin:0; padding:0; overflow:hidden;
background:url(images/icon/action_delete.gif) no-repeat;
cursor:pointer; text-indent:-999px}
 
.forminfo{padding:5px;}
 
.inputR{width:120px;}
 
.bg{background-color:#CCC;-moz-opacity: 0.5; filter: alpha(opacity = 50); height:10000px;
width:120%; position:absolute; z-index:9998; left:0; top:0; display:none}

 
function alertinfo(id){
 
//显示弹出层
var obj = document.getElementById(id);
var W = screen.width;//取得屏幕分辨率宽度 
var H = screen.height;//取得屏幕分辨率高度 
var yScroll;//取滚动条高度 
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
yScroll = document.documentElement.scrollTop;
} else if (document.body) {
yScroll = document.body.scrollTop;
}
//obj.style.marginLeft= (W/2 - 200) + "px";
obj.style.top= (H/2 -90 - 225　+　yScroll) + "px";
document.getElementById("bg").style.display="block";
obj.style.display="block"; var scrollstyle = scrolls();
scrollstyle.style.overflowX = "hidden";
scrollstyle.style.overflowY = "hidden";
}
 
function closediv(id){
//关闭弹出层 
document.getElementById(id).style.display="none";
document.getElementById("bg").style.display="none";
var scrollstyle = scrolls();
scrollstyle.style.overflowY = "auto";
scrollstyle.style.overflowX = "hidden";
}
 
function scrolls(){
//取浏览器类型 
var temp_h1 = document.body.clientHeight;
var temp_h2 = document.documentElement.clientHeight;
var isXhtml = (temp_h2<=temp_h1&&temp_h2!=0)?true:false;
var htmlbody = isXhtml?document.documentElement:document.body;
return htmlbody;
}

<div class="bg" id="bg"></div>
 
<div id="alertdiv">
 
<h2>请填写表单信息<a href="javascript: closediv('alertdiv')" title="关闭">关闭</a></h2>
 
<div class="forminfo">
 
<table width="100%" border="0" align="center" cellpadding="5">
 
<form id="form1" name="form1" method="post" action="">
 
<tr>
 
<td width="21%" align="right">字段一： </td>
 
<td width="41%"> <input type="text" name="textfield" id="textfield" class="inputR"/> </td>
 
<td width="38%">&nbsp;</td>
 
</tr>
 
<tr>
 
<td align="right">字段三：</td>
 
<td><input type="text" name="textfield2" id="textfield2" class="inputR"/></td>
 
<td>&nbsp;</td>
 
</tr>
 
<tr>
 
<td align="right">字段四：</td>
 
<td><input type="text" name="textfield3" id="textfield3" class="inputR"/></td>
 
<td>&nbsp;</td>
 
</tr>
 
<tr>
 
<td align="right">字段五：</td>
 
<td><input type="text" name="textfield4" id="textfield4" class="inputR"/></td>
 
<td>&nbsp;</td>
 
</tr>
 
<tr>
 
<td align="right">&nbsp;</td>
 
<td colspan="2"><label> <input type="submit" name="button" id="button" value="提交" /> </label>
 
<label> <input type="reset" name="button2" id="button2" value="重置" /> </label></td>
 
</tr>
 
</form>
 
</table>
 
</div>
 
</div>
 
<p>&nbsp;</p>
 
<p>&nbsp;</p>
 
<p>&nbsp;</p>
 
<p>&nbsp;</p>
 
<p>&nbsp;</p>
 
<p>&nbsp;</p>
 
<p>;&nbsp;</p>
 
<p>&nbsp;</p>
 
<p><a href="javascript: alertinfo('alertdiv');">显示弹出层</a></p>