弹出层并遮罩背景js,弹出后怎么会消失?找不到原因了,求教
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>点击弹出层</title><style type="text/css">/****订单弹出框*****/.orderMsg{ position:absolute; background:#fff; border:1px solid #939395; width:500px; height:340px; overflow:hidden; z-index:99999; font-size:14px; color:#000; left:0; top:0; display:none;}.orderMsg dl{ overflow:hidden; margin:20px;}.orderMsg dl dt{ line-height:30px;}.orderMsg dl dd{ line-height:25px; padding-left:10px;}.orderMsg dl dd label{ padding-left:5px;}.orderMsg dl dd.cBtn{ width:102px; height:28px; background:url(../images/member/chooseBtn.gif) no-repeat; margin-top:10px; padding:0;}.orderMsg dl dd.cBtn a{ display:block; text-align:center;}.orderMsg dl dd.cBtn a:link,.orderMsg dl dd.cBtn a:visited{ color:#000;}.orderMsg dl dd.lBtn{ float:left; display:inline; margin-left:100px;}.orderMsg dl dd.rBtn{ float:left; display:inline; margin-left:10px;}</style></head> <body><p><a href="" onclick="killOrder()">点击弹出层</a></p><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 /><div id="orderMsg" class="orderMsg"> <dl> <dt>请您告知我们取消订单的原因,以便我们改进。非常感谢!</dt> <dd><input type="radio" name="reason" id="reason1"><label for="reason1">改变主意,现在不想买了</label></dd> <dd><input type="radio" name="reason" id="reason2"><label for="reason2">刚才信息填错了,要重新下单</label></dd> <dd><input type="radio" name="reason" id="reason3"><label for="reason3">先取消,再更换或添加新商品</label></dd> <dd><input type="radio" name="reason" id="reason4"><label for="reason4">网银,信用卡等支付有问题</label></dd> <dd><input type="radio" name="reason"id="reason5"><label for="reason5">等待时间过长,不耐烦了</label></dd> <dd><input type="radio" name="reason" id="reason6"><label for="reason6">商品价格较贵</label></dd> <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="#" onclick="killOrder()">选好了</a></dd><dd class="cBtn rBtn"><a href="#" onclick="killOrder(1)">点击取消</a></dd> </dl></div> <script type="text/javascript" language="javascript"> var killOrder = function(btn){ //btn为弹出窗口或者关闭窗口,为空则为弹出窗口,有值为取消关闭窗口; if (!btn) { var isIe = (document.all) ? true: false;//判断IE浏览器 var orderMsg = document.getElementById("orderMsg"); var w = document.body.clientWidth; var h = document.body.clientHeight;//带!DOCTYPE时高度是整个网页的高度 var h1 = document.documentElement.clientHeight;//带!DOCTYPE的时候用的可视高度 //alert(h1); var styleStr = "top:0px;left:0px;position:absolute;z-index:999;background:#666;width:" + w + "px;height:" + h + "px;"; styleStr += (isIe) ? "filter:alpha(opacity=80);": "opacity:0.8;";//背景遮罩层CSS //alert(styleStr); var styleStr1 = "display:block;left:" + (w / 2 - 250) + "px;top:" + (h1 / 2 - 170) + "px;"; //弹出层CSS //alert(styleStr1); var shadowDiv = document.createElement("div"); //背景遮罩层DIV var iframea = document.createElement("iframe");//防止SELECT遮挡弹出层 //alert(shadowDiv); shadowDiv.style.cssText = styleStr; //添加样式 shadowDiv.id = "shadowDiv"; document.body.insertBefore(shadowDiv, document.body.lastChild); //加入文档 orderMsg.style.cssText = styleStr1; iframea.style.cssText = "position:absolute;z-index:-1;width:500px;height:340px;top:0;left:0;scrolling:no;border:0;"; iframea.frameborder = 0; iframea.src = "about:blank"; orderMsg.insertBefore(iframea, orderMsg.firstChild); //alert(1); }else{ //alert(1); if (document.getElementById("shadowDiv")){ //alert(!shadowDiv); document.body.removeChild(document.getElementById("shadowDiv")); orderMsg.style.cssText = "display:none;left:" + (w / 2 - 250) + "px;top:" + (h / 2 - 170) + "px;"; } }}</script></body></html>