<script type="text/javascript">
var docElement = function() {
//arguments 函数的参数个数
//判断是否存在Id元素
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(centerShowDivId) {
var seeId = "seeId";
//防止id重复
if(docElement(centerShowDivId)){
document.body.removeChild(docElement(centerShowDivId));
}
if(docElement(seeId)){
document.body.removeChild(docElement(seeId));
}
//mask遮罩层
var seeDiv = document.createElement("div");
seeDiv.id = seeId;
seeDiv.style.position = "absolute";
seeDiv.style.zIndex = "1";
_scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
seeDiv.style.width = _scrollWidth + "px";
seeDiv.style.height = _scrollHeight + "px";
seeDiv.style.top = "0px";
seeDiv.style.left = "0px";
seeDiv.style.background = "red";
//透明度IE
seeDiv.style.filter = "alpha(opacity=40)";
//透明度火狐
seeDiv.style.opacity = "0.40";
document.body.appendChild(seeDiv);
//新弹出层
var centerShowDiv = document.createElement("div");
centerShowDiv.id = centerShowDivId;
centerShowDiv.style.position = "absolute";
//显示在newMask前面优先级
centerShowDiv.style.zIndex = "9999";
centerShowDivWidth = 400;
centerShowDivHeight = 200;
centerShowDiv.style.width = centerShowDivWidth + "px";
centerShowDiv.style.height = centerShowDivHeight + "px";
//alert(document.body.scrollTop+"~~"+document.body.scrollLeft);0 0
centerShowDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - centerShowDivHeight/2) + "px";
centerShowDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 -centerShowDivWidth/2) + "px";
centerShowDiv.style.background = "#EFEFEF";
centerShowDiv.style.border = "1px solid #860001";
centerShowDiv.style.padding = "5px";
centerShowDiv.innerHTML = "弹出层内容 ";
document.body.appendChild(centerShowDiv);
//弹出层滚动居中
function newDivCenter()
{
centerShowDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - centerShowDivHeight/2) + "px";
centerShowDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - centerShowDivWidth/2) + "px";
}
//document.all=true可以判断是否IE
if(document.all){
//支持IE
window.attachEvent("onscroll",newDivCenter);
}
else{
//支持火狐
window.addEventListener('scroll',newDivCenter,false);
}
//关闭新图层和mask遮罩层
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "关闭";
newA.onclick = function(){
//document.all=true可以判断是否IE
if(document.all){
//支持IE
window.detachEvent("onscroll",newDivCenter);
}
else{
//支持火狐
window.removeEventListener('scroll',newDivCenter,false);
}
document.body.removeChild(docElement(centerShowDivId));
document.body.removeChild(docElement(seeId));
return false;
}
centerShowDiv.appendChild(newA);
}
</script>
<html>
<body>
<input type="text"/>
<a οnclick="openNewDiv('newId');return false;" style="cursor:pointer">qifei弹层</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a οnclick="openNewDiv('newId');return false;" style="cursor:pointer">qifei弹层</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a οnclick="openNewDiv('newId');return false;" style="cursor:pointer">qifei弹层</a>
</body>
</html>