<!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=gb2312" />
<title>点击弹出浮动层(自动适应居中) 兼容 ie6+,FF,Opera,谷歌</title>
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#clickme").click(function(){
//slow隐藏的段落显示出来，历时600毫秒
//fast用迅速的动画将隐藏的段落显示出来，历时200毫秒
//100自定义时间
//normal
// alert(document.documentElement.clientHeight);
ietest();
$("#TB_SRP_DIALOG").show("normal");
});
$(".closeButton").click(function(){
$("#TB_SRP_DIALOG").hide("normal");
});
});
ietest=function(){
var _width=(document.documentElement.clientWidth/2)-($("#TB_SRP_DIALOG").width()/2);//窗口宽度 (浏览器宽度/2)-(浮动层宽度/2)
var _height=(document.documentElement.clientHeight/2)-($("#TB_SRP_DIALOG").height()/2);//窗口高度 (浏览器高度/2)-(浮动层高度/2)
if ($.browser.version == "6.0")//$.browser.msie ie系列浏览器
{
document.getElementById('TB_SRP_DIALOG').style.left=_width;
document.getElementById('TB_SRP_DIALOG').style.top=_height;
}
else{
$("#TB_SRP_DIALOG").css({left:_width,top:_height});
}
}
window.onresize=ietest; //缩放窗体时触发事件
</script>
<style type="text/css">
.search-popup-window {
background: none repeat scroll 0 0 padding-box rgba(0, 0, 0, 0.25);/*padding-box 边框背景 rgba颜色跟透明度*/
border-radius: 5px; /*边框圆角，不支持IE*/
overflow: hidden;
padding: 8px;
position: fixed;
_position: absolute;/*支持IE6浮动定位*/
z-index: 10000;
display:none;
width:360px;
height:285px;
}
.search-popup-wrapper, .search-popup-window-wrapper {
background-color: #FFFFFF;
border: 1px solid #818181;
height: 100%;
position: relative;
z-index: 10001;
}
.search-popup-window .hd {
-moz-user-select: none;
background: url("http://img04.taobaocdn.com/tps/i4/T1MBVHXjdeXXXXXXXX.png") repeat-x scroll 0 -1267px #FFFFFF;
height: 33px;
position: relative;
z-index: 3;
}
.search-popup-window .hd h4 {
-moz-user-select: none;
color: #333333;
font-size: 14px;
font-weight: normal;
left: 20px;
position: absolute;
top: -10px;
_top: 8px;
}
.search-popup-window .hd .closeButton {
background: url("http://img02.taobaocdn.com/tps/i2/T1ovpYXdtyXXXXXXXX-260-700.png") no-repeat scroll -77px -578px transparent;
display: block;
height: 22px;
overflow: hidden;
position: absolute;
right: 7px;
text-indent: -9999px;
top: 7px;
width: 22px;
z-index: 10001;
}
.search-popup-window .hd .closeButton:hover {
background-position: -55px -578px;
}
.search-popup-window .bd {
background: none repeat scroll 0 0 #FFFFFF;
display: block;
overflow: hidden;
padding: 5px 20px 14px;
position: relative;
z-index: 2;
}
.dialog-login .bd {
height: 250px;
padding: 0;
}
</style>
</head>
<body>
<a href="javascript:;" id="clickme" style="position:relative;">点击我</a> 兼容 ie6+,FF,Opera,谷歌
<div class="search-popup-window dialog-login" id="TB_SRP_DIALOG" >
<div class="search-popup-window-wrapper">
<div class="hd"><h4>标题</h4><a class="closeButton" href="#"></a></div><div class="bd">
<div width="360" height="275">
内容
</div>
</div></div></div>
</body>
</html>
