不错，写的很好。
我在你的基础上稍微做了些修改，现在将完整的代码贴上以供参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#bt
{
border: 2px solid #000;
background-color: #ccc;
cursor: pointer;
padding: 5px 5px;
}
.VeryhuoCOM
{
position: fixed;
_position: absolute;
_top: expression(documentElement.scrollTop + 340 + "px");
background: #fff;
border: 1px solid #939395;
width: 500px;
height: 240px;
top: 50%;
left: 50%;
margin: -200px 0 0 -250px;
overflow: hidden;
z-index: 99999;
font-size: 14px;
color: #000;
display: none;
}
.VeryhuoCOM dl
{
overflow: hidden;
padding: 20px;
margin: 0;
}
.VeryhuoCOM dl dt
{
line-height: 30px;
}
.VeryhuoCOM dl dd
{
line-height: 25px;
height: 25px;
padding-left: 10px;
margin: 0;
}
.VeryhuoCOM dl dd label
{
padding-left: 5px;
}
</style>
</head>
<body>
<br />
<br />
<div style="height: 100px;">
<a id="bt">点击弹出div</a>
</div>
<div id="VeryhuoCOM" class="VeryhuoCOM" style="display: none;">
<dl>
<dt>请您告知我们取消订单的原因，以便我们改进。非常感谢!</dt>
<dd>
<input type="radio" name="reason" id="reason7" /><label for="reason7">出现商品缺货情况</label></dd>
<dd>
<input type="radio" name="reason" id="reason8" /><label for="reason8">其它的原因</label></dd>
<dd>
<input type="radio" disabled="disabled" /><label>72小时到期自动取消(不可选)</label></dd>
<dd class="cBtn lBtn">
<a href="#">选好了</a></dd>
<dd class="cBtn rBtn">
<a href="#" id="close">点击取消</a></dd>
</dl>
</div>
请您告知我们取消订单的原因，以便我们改进。非常感谢!
<script type="text/javascript">
var MaskJson = { //使用json对象好过使用函数。
cssStyle: "width:100%;position:absolute;left:0;top:0;filter:alpha(opacity = 50);opacity:0.5;border:0;overflow:auto;",
createShadowDiv: function () {//遮罩背景
var shadowDiv = document.createElement("div");
shadowDiv.id = "shadowDiv";
shadowDiv.style.cssText = this.cssStyle;
shadowDiv.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
var isIE = (document.all) ? true : false;
var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
function layer_iestyle() {
shadowDiv.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
shadowDiv.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
}
if (isIE) {
shadowDiv.style.filter = "alpha(opacity=50)";
}
if (isIE6) {
layer_iestyle();
window.attachEvent("onresize", layer_iestyle);
} else {
layer_iestyle();
window.addEventListener("resize", layer_iestyle, false);
}
shadowDiv.style.backgroundColor = "#000"
shadowDiv.style.zindex = 100;
document.body.appendChild(shadowDiv);
},
createIframe: function () {
//shadowIframe
var iframe = document.createElement("iframe");
iframe.id = "shadowIframe";
iframe.style.cssText = this.cssStyle;
iframe.frameBorder = 0;
iframe.style.height = document.body.scrollHeight + "px";
iframe.style.zindex = 99;
document.body.appendChild(iframe);
},
createMask: function () {
this.createIframe();
this.createShadowDiv();
},
removeMask: function () {
document.body.removeChild(document.getElementById("shadowDiv"));
document.body.removeChild(document.getElementById("shadowIframe"));
},
onclick: function (openButtonID, divMaskID, closeButtonID) {
//openButtonID：打开遮罩层元素的id
//divMaskID:遮罩层元素的id(一般都是div)
//closeButtonID:关闭遮罩层元素的id
var that = this;
document.getElementById(openButtonID).onclick = function () {
if (window.ActiveXObject) {//ie6
if (!window.XMLHttpRequest) {
document.body.style.cssText = "_background-image: url(about:blank);_background-attachment: fixed;";
}
}
document.getElementById(divMaskID).style.display = "block";
that.createMask();
}
document.getElementById(closeButtonID).onclick = function () {
document.getElementById(divMaskID).style.display = "none";
that.removeMask();
}
}
};
MaskJson.onclick("bt", "VeryhuoCOM", "close");
</script>
</body>
</html>
[
本帖最后由 303770957 于 2013-10-12 23:46 编辑 ]
实现完善的遮罩层锁屏弹窗.rar
(48.77 KB)
