纯CSS弹出框不论页面大小绝对居中适合所有浏览器

<!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>
.pop_box{height:200px; width:200px; background-color:#f4eee8; text-align:center;position:fixed; top:50%; left:50%; margin-top:-100px; margin-left:-100px; _position:absolute; /* for IE6 */ _top: expression(documentElement.scrollTop + (documentElement.clientHeight-this.offsetHeight)/2); /* for IE6 */ overflow:visible; z-index:11;}
.bg{background-color: #000;width: 100%;height: 100%;left: 0;top: 0; /*FF IE7*/filter: alpha(opacity = 70) !important; /*IE*/ opacity: 0.50; /*FF*/z-index: 10;position: fixed !important; /*FF IE7*/position: absolute; /*IE6*/ _height:1120px;}
</style>
</head>

<body>
<div class="pop_box"></div>
<div class="bg"></div>
</body>
</html>

posted on 2011-11-22 14:16  菜鸟级  阅读(1235)  评论(0编辑  收藏  举报

导航