很久以前在1个项目中使用过
当时做的不完善,没有屏蔽掉滚动框的BUG
这次想起来修改下,代码见附件
-----------------------------------------------------------------------
<!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 runat="server">
<title></title>
<script type="text/javascript">
function bb(str) {
var bordercolor, msgw, msgh;
msgw=300;
msgh=300;
titleheight=25;
bordercolor="green";
titlecolor = "black";
<head runat="server">
<title></title>
<script type="text/javascript">
function bb(str) {
var bordercolor, msgw, msgh;
msgw=300;
msgh=300;
titleheight=25;
bordercolor="green";
titlecolor = "black";
document.body.style.setAttribute("overflow","hidden");//禁用滚动条
/*
遮罩层
*/
var bgdiv = document.createElement("div");
bgdiv.setAttribute("id", "bgdiv");
bgdiv.style.position = "absolute";
bgdiv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
bgdiv.style.filter = "0.6";
bgdiv.style.background = "#777";
bgdiv.style.top = document.documentElement.scrollTop;//滚动条的高度
bgdiv.style.left = "0px";
bgdiv.style.width = "100%";
bgdiv.style.height = "100%";
bgdiv.style.zIndex = "100";
document.body.appendChild(bgdiv);
/*
遮罩层
*/
var bgdiv = document.createElement("div");
bgdiv.setAttribute("id", "bgdiv");
bgdiv.style.position = "absolute";
bgdiv.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75)";
bgdiv.style.filter = "0.6";
bgdiv.style.background = "#777";
bgdiv.style.top = document.documentElement.scrollTop;//滚动条的高度
bgdiv.style.left = "0px";
bgdiv.style.width = "100%";
bgdiv.style.height = "100%";
bgdiv.style.zIndex = "100";
document.body.appendChild(bgdiv);
/*
弹出框的层
*/
var msgdiv = document.createElement("div");
msgdiv.setAttribute("id", "msgdiv");
msgdiv.setAttribute("align", "center");
msgdiv.style.background = "white";
msgdiv.style.border = "1px solid "+bordercolor;
msgdiv.style.position = "absolute";
msgdiv.style.top = "30%";
msgdiv.style.left = "35%";
msgdiv.style.width = msgw + "px";
msgdiv.style.height = msgh + "px";
msgdiv.style.align = "center";
msgdiv.style.zIndex = "101";
var tit = document.createElement("h4");
tit.setAttribute("id", "msgtit");
tit.setAttribute("align", "right");
tit.style.margin = "0";
tit.style.padding = "3px";
tit.style.background = titlecolor;
tit.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20,startY=20,finishX=100,finishY=100,style=1,opacity=75,finishOpacity=100);";
tit.style.filter = "0.75";
tit.style.height = titleheight;
tit.style.color = "white";
tit.style.cursor = "pointer";
tit.innerHTML = "<a href='#'>关闭</a>";
tit.onclick = function () {//关闭事件
document.body.removeChild(bgdiv);
document.getElementById("msgdiv").removeChild(tit);
document.body.removeChild(msgdiv);
document.body.style.setAttribute("overflow","scroll");//启动滚动条
}
tit.setAttribute("id", "msgtit");
tit.setAttribute("align", "right");
tit.style.margin = "0";
tit.style.padding = "3px";
tit.style.background = titlecolor;
tit.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20,startY=20,finishX=100,finishY=100,style=1,opacity=75,finishOpacity=100);";
tit.style.filter = "0.75";
tit.style.height = titleheight;
tit.style.color = "white";
tit.style.cursor = "pointer";
tit.innerHTML = "<a href='#'>关闭</a>";
tit.onclick = function () {//关闭事件
document.body.removeChild(bgdiv);
document.getElementById("msgdiv").removeChild(tit);
document.body.removeChild(msgdiv);
document.body.style.setAttribute("overflow","scroll");//启动滚动条
}
document.body.appendChild(msgdiv);
document.getElementById("msgdiv").appendChild(tit);
var txt=document.createElement("p");
txt.style.margin="1em o";
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgdiv").appendChild(txt);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<input id="Checkbox1" type="button" value="查看"/>
</div>
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
</form>
</body>
</html>
document.getElementById("msgdiv").appendChild(tit);
var txt=document.createElement("p");
txt.style.margin="1em o";
txt.setAttribute("id","msgTxt");
txt.innerHTML=str;
document.getElementById("msgdiv").appendChild(txt);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
<input id="Checkbox1" type="button" value="查看"/>
</div>
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
<br />3213213213<br />3213213<br />3213213213<br />33<br
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
/>3213213213<br />33<br />
</form>
</body>
</html>
转载于:https://blog.51cto.com/2172768/768510