<!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> new document </title>
<meta name="keywords" content="">
<meta name="description" content="">
<style type="text/css">
#btn {
text-align:center;
margin:2px 1px;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow:#555 1px 1px 5px;
cursor:pointer;
width:80px;
height:20px;
}
#bg {
display:none;
position:absolute;
top:0px;
left:0px;
width:100%;
background:#000;
opacity:0.5;
filter: alpha(opacity=50);
z-index:1;
}
#cont {
display:none;
position:absolute;
width:350px;
height:250px;
border:1px solid #312312;
border-radius: 5px;
background:#fff;;
z-index:2;
}
#close {
width:20px;
height:20px;
border:1px solid #312312;
background:#ccc;
float:right;
cursor:pointer;
}
</style>
</head>
<body>
<div id="container">
<img src="http://www.placehold.it/350x250">
<img src="http://www.placehold.it/350x250/FF0000">
<img src="http://www.placehold.it/350x250/00FF00">
<img src="http://www.placehold.it/350x250/F0F0F0">
<img src="http://www.placehold.it/350x250/0000FF">
<img src="http://www.placehold.it/350x250">
<img src="http://www.placehold.it/350x250/FF0000">
<img src="http://www.placehold.it/350x250/00FF00">
<img src="http://www.placehold.it/350x250/F0F0F0">
<img src="http://www.placehold.it/350x250/0000FF">
<img src="http://www.placehold.it/350x250"><div id="btn">
点击我吧
</div>
<img src="http://www.placehold.it/350x250/FF0000">
<img src="http://www.placehold.it/350x250/00FF00">
<img src="http://www.placehold.it/350x250/F0F0F0">
<img src="http://www.placehold.it/350x250/0000FF">
<img src="http://www.placehold.it/350x250">
<img src="http://www.placehold.it/350x250/FF0000">
<img src="http://www.placehold.it/350x250/00FF00">
<img src="http://www.placehold.it/350x250/F0F0F0">
<img src="http://www.placehold.it/350x250/0000FF">
</div>
<div id="bg">
</div>
<div id="cont">
<div id="close">X</div>
我是一个浮动层!
</div>
<script type="text/javascript">
function getStyle(elem, styleName){
if(elem.currentStyle) {
getStyle = function(elem, styleName) {
return elem.style[styleName] ? elem.style[styleName] : elem.currentStyle[styleName];
}
} else if(window.getComputedStyle) {
getStyle = function(elem, styleName) {
return elem.style[styleName] ? elem.style[styleName] : window.getComputedStyle(elem, null)[styleName];
}
} else {
getStyle = function(elem, styleName) {
return elem.style[styleName];
}
}
return getStyle(elem, styleName);
}
/*
document.body.scrollTop + document.documentElement.scrollTop 因为两个值总有一个为0,所以兼容个浏览器。
document.documentElement.scrollHeight 兼容各浏览器的页面可视高度
*/
window.onload = function() {
var domBg = document.getElementById("bg"),
domCont = document.getElementById("cont"),
domBtn = document.getElementById("btn"),
domClose = document.getElementById("close");
domBtn.onclick = function() {
var contLeft = (document.documentElement.clientWidth - parseInt(getStyle(domCont, "width"))) / 2 + "px",
contTop = document.body.scrollTop + document.documentElement.scrollTop + (document.documentElement.clientHeight - parseInt(getStyle(domCont, "height"))) / 2 + "px";
domBg.style.cssText = "height:" + document.documentElement.scrollHeight + "px; display:block;";
domCont.style.cssText = "left:" + contLeft + "; top:" + contTop + "; display:block;";
}
domClose.onclick = function() {
domBg.style.cssText = "";
domCont.style.cssText = "";
}
}
</script>
</body>
</html>