<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹出层</title>
</head>
<body>
<div id="popupDiv" style="border: 1px solid #ccc;display: none;height: 100px;width: 300px;text-align: center;">
<p>
<input type="button" id="popupClose" value="确定" />
</p>
</div>
<input type="button" id="popupOpen" value="弹出" />
<script>
window.οnlοad=function(){
function setCss(_this,cssOption){ //设置元素样式
//判断节点类型
if(!_this||_this.nodeType===3||_this.nodeType===8||!_this.style){
//如果对象为空、节点是注释或空字节、对象不支持style属性，则返回
return;
}
for(var cs in cssOption){ //枚举出cssOption里的所有属性，并设置相应的样式
_this.style[cs]=cssOption[cs];
}
}
function setPopup(e,openPop,closePop){
setCss(e,{ //初始化样式
"position": "absolute",
"zIndex": 100,
"backgroundColor": "#ebedf3"
});
openPop.οnclick=function(){
e.style.display="block";
setCss(e,{ //修改弹出层的位置，将其定位于屏幕的可见区域中间位置
"left": "50%",
"marginLeft": -e.offsetWidth/2+"px",
"top": ((document.body.scrollTop||document.documentElement.scrollTop)+window.screen.availHeight/2- e.offsetHeight)+"px"
//document.body.scrollTop: 网页被卷去的高(document.documentElement.scrollTop为xhtml里面声明了dtd文档的写法)
//availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。
//元素可见区域宽： offsetWidth (包括边线的宽);
/元素可见区域高： offsetHeight (包括边线的高);
});
}
closePop.οnclick=function(){
e.style.display="none";
}
}
setPopup(
document.getElementById("popupDiv"),
document.getElementById("popupOpen"),
document.getElementById("popupClose")
);
}
</script>
</body>
</html>
4667
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
