Js弹出DIV遮罩层并在页面居中显示效果

Js弹出DIV遮罩层并在页面居中显示效果，这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解

openID=显示按钮,conID=需要显示的div,closeID=关闭按钮

解决了:
1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度
2.弹出的div可以一直在浏览器屏幕中间显示

问题:
1.目前不支持.class 只支持#id
2.需要显示的div需要自己设置css
3.在ie6下需要设置css
例如div {_position: absolute;_top: expression(documentElement.scrollTop + 340 + "px"); }
4.ie6下背景div没有透明度 这里我上网搜到的结果都不能解决 如果您有方法请给我留言

演示代码：

<!DOCTYPE HTML><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>Js居中弹出遮罩层效果_veryhuo.COM</title><br /> <style type="text/css"><br /> *{margin:0;padding:0;}<br /> #bt{border: 2px solid #000;background-color: #ccc;cursor: pointer;padding: 2px 5px;}<br /> /****订单弹出框*****/<br /> .VeryhuoCOM{ position:fixed;_position: absolute;_top: expression(documentElement.scrollTop + 340 + "px"); background:#fff; border:1px solid #939395; width:500px; height:340px;top: 50%;left: 50%;margin: -200px 0 0 -250px; overflow:hidden; z-index:99999; font-size:14px; color:#000; display:none;}<br /> .VeryhuoCOM dl{ overflow:hidden; padding:20px; margin:0;}<br /> .VeryhuoCOM dl dt{ line-height:30px;}<br /> .VeryhuoCOM dl dd{ line-height:25px; height:25px; padding-left:10px; margin:0;}<br /> .VeryhuoCOM dl dd label{ padding-left:5px;}<br /> .VeryhuoCOM dl dd.cBtn{ width:102px; height:28px; background:url(../images/member/chooseBtn.gif) no-repeat; margin-top:10px; padding:0;}<br /> .VeryhuoCOM dl dd.cBtn a{ display:block; text-align:center;}<br /> .VeryhuoCOM dl dd.cBtn a:link,.VeryhuoCOM dl dd.cBtn a:visited{ color:#000;}<br /> .VeryhuoCOM dl dd.lBtn{ float:left; display:inline; margin-left:100px;}<br /> .VeryhuoCOM dl dd.rBtn{ float:left; display:inline; margin-left:10px;}<br /> </style><br /> </head><br /> <body><br /> <a id="bt">点击弹出div</a><br /> <div style="height:1000px;"><br /> sdfdsf<br /> <select><br /> <option>Volvo</option><br /> <option selected="selected">Saab</option><br /> <option>Mercedes</option><br /> <option>Audi</option><br /> </select><br /> </div><br /> <a id="bt">点击弹出div</a><br /> <div style="height:1000px;"><br /> sdfdsf<br /> <select><br /> <option>Volvo</option><br /> <option selected="selected">Saab</option><br /> <option>Mercedes</option><br /> <option>Audi</option><br /> </select><br /> </div><br /> <div id="VeryhuoCOM" class="VeryhuoCOM" style="display: none;"><br /> <dl><br /> <dt>请您告知我们取消订单的原因，以便我们改进。非常感谢!</dt><br /> <dd><input type="radio" name="reason" id="reason1"><label for="reason1">改变主意,现在不想买了</label></dd><br /> <dd><input type="radio" name="reason" id="reason2"><label for="reason2">刚才信息填错了,要重新下单</label></dd><br /> <dd><input type="radio" name="reason" id="reason3"><label for="reason3">先取消,再更换或添加新商品</label></dd><br /> <dd><input type="radio" name="reason" id="reason4"><label for="reason4">网银,<b>信用卡</b>等支付有问题</label></dd><br /> <dd><input type="radio" name="reason" id="reason5"><label for="reason5">等待时间过长,不耐烦了</label></dd><br /> <dd><input type="radio" name="reason" id="reason6"><label for="reason6">商品价格较贵</label></dd><br /> <dd><input type="radio" name="reason" id="reason7"><label for="reason7">出现商品缺货情况</label></dd><br /> <dd><input type="radio" name="reason" id="reason8"><label for="reason8">其它的原因</label></dd><br /> <dd><input type="radio" disabled="disabled"><label>72小时到期自动取消(不可选)</label></dd><br /> <dd class="cBtn lBtn"><a href="#">选好了</a></dd><dd class="cBtn rBtn"><a href="#" onclick="" id="close">点击取消</a></dd><br /> </dl><br /> </div><br /> <script type="text/javascript"><br /> /*<br /> openID=显示按钮,conID=需要显示的div,closeID=关闭按钮<br /> Downloads By http://www.veryhuo.com<br /> 解决了:<br /> 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度<br /> 2.弹出的div可以一直在浏览器屏幕中间显示<br /> 问题:<br /> 1.目前不支持.class 只支持#id<br /> 2.需要显示的div需要自己设置css<br /> 3.在ie6下需要设置css<br /> 例如div {_position: absolute;_top: expression(documentElement.scrollTop + 340 + "px"); }<br /> 4.ie6下背景div没有透明度 这里我上网搜到的结果都不能解决 如果您有方法请给我留言<br /> */<br /> var _CalF = { //便捷方法<br /> $ : function(id){return document.getElementById(id)},<br /> create : function(id){return document.createElement(id)},<br /> append : function(id){return document.body.appendChild(id)},<br /> remove : function(id){return document.body.removeChild(id)}<br /> }<br /> function popup(openID,conID,closeID){<br /> this.onclick(openID,conID,closeID);<br /> }<br /> popup.prototype = {<br /> cssStyle : "width:100%;position:absolute;left:0;top:0;filter:alpha(opacity = 50);opacity:0.5;border:0;overflow:auto;",<br /> createShadowDiv : function(){ //背景遮罩<br /> var shadowDiv = _CalF.create("div");<br /> shadowDiv.id = "shadowDiv";<br /> shadowDiv.style.cssText = this.cssStyle;<br /> shadowDiv.style.height = document.body.scrollHeight + "px";<br /> shadowDiv.style.backgroundColor = "#000"<br /> shadowDiv.style.zindex = 100;<br /> _CalF.append(shadowDiv);<br /> },<br /> createIframe : function(){ //iframe<br /> var iframe = _CalF.create("iframe");<br /> iframe.id = "shadowIframe";<br /> iframe.style.cssText = this.cssStyle;<br /> iframe.style.height = document.body.scrollHeight + "px";<br /> iframe.style.zindex = 99;<br /> _CalF.append(iframe);<br /> },<br /> removeDiv : function(){<br /> _CalF.remove(_CalF.$("shadowDiv"));<br /> _CalF.remove(_CalF.$("shadowIframe"));<br /> },<br /> onclick : function(openID,conID,closeID){<br /> var that = this;<br /> _CalF.$(openID).onclick = function(){<br /> if(window.ActiveXObject){ //ie6<br /> if(!window.XMLHttpRequest){<br /> document.body.style.cssText = "_background-image: url(about:blank);_background-attachment: fixed;";<br /> }<br /> }<br /> that.createIframe();<br /> that.createShadowDiv();<br /> _CalF.$(conID).style.display = "block";<br /> }<br /> document.getElementById(closeID).onclick = function(){<br /> _CalF.$(conID).style.display = "none";<br /> that.removeDiv();<br /> }<br /> }<br /> }<br /> var bt = new popup("bt","VeryhuoCOM","close");<br /> </script><br /> </body><br /> </html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href=’http://www.veryhuo.com/’ target=’_blank’>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!