javascript构造弹出div 并可关闭--待修改的

/* 背景的大小还要好好研究一下。*/


<div>
<input type="button" value="点击按钮弹出Div" onClick="crAlert('测试效果');" />
</div>

<script type="text/javascript" language="javascript">

function crAlert(str){
var outDivWidth,outDivHeight,borderColor;
outDivWidth=400;
outDivHeight=200;
borderColor="#336699";

/*设置弹出Div后背景的属性*/
var screenWidth,screenHeight;
screenWidth=document.body.offsetWidth;
screenHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.background="#bebebe";
bgObj.style.width=screenWidth + "px"
bgObj.style.height=screenHeight + "px";
bgObj.style.zIndex = "-1";
document.body.appendChild(bgObj);

/*设置弹出Div的相关属性*/
var outDivObj=document.createElement("div")
outDivObj.setAttribute("id","outDivDiv");
outDivObj.setAttribute("align","center");
outDivObj.style.background="white";
outDivObj.style.border="1px solid " + borderColor;
outDivObj.style.position = "absolute";
outDivObj.style.left = "50%";
outDivObj.style.top = "50%";
outDivObj.style.marginLeft = "-200px" ;
outDivObj.style.marginTop = -100+"px";
outDivObj.style.font="14px '宋体'";
outDivObj.style.fontWeight="bold";
outDivObj.style.width = outDivWidth + "px";
outDivObj.style.height =outDivHeight + "px";
outDivObj.style.textAlign = "center";
outDivObj.style.zIndex = "1";

/*设置弹出Div的标题*/
var title=document.createElement("p");
title.setAttribute("id","outDivTitle");
title.setAttribute("align","right");
title.style.background=borderColor;???
title.style.height="20px";
title.style.font="12x '宋体'";
title.style.color="#FFF";
title.style.cursor="hand";
title.innerHTML="关闭";

document.body.appendChild(outDivObj);
document.getElementById("outDivDiv").appendChild(title);??????
var txt=document.createElement("p");
txt.setAttribute("id","outDivTxt");
txt.innerHTML=str;
document.getElementById("outDivDiv").appendChild(txt);

/*点击标题隐藏 背景层+弹出的Div+弹出Div上的Title*/
title.onclick=function(){
document.body.removeChild(bgObj);
document.getElementById("outDivDiv").removeChild(title);
document.body.removeChild(outDivObj);
}??????????
}
</script>
原文地址:https://www.cnblogs.com/crmhf/p/3823133.html