div 弹出层(垂直与横向居中),兼容ie和ff

时间:2010-10-03 23:29:29 浏览次数:

ag电子:节目官方微博爆出来的花絮照中,热巴不仅笑容满满,而且看的出来,被跑男们保护的也是很好,之前的被排挤什么鬼的现在看来也是网友们YY出来的啦,人家好着呢。

下面是整个页面的代码,总共分为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>
标签: 弹出

合作: 申博官网 365bet体育投注 ag电子