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

发布时间：2018-08-14 18:51:31 所属栏目：活动来源：站长网

导读：Js弹出DIV遮罩层并在页面居中表现结果，这两天要用到正好练练手,比想象中遇到的题目要多,好比: ie6配景透明 ie6居中表现尚有对js工具的领略 openID=表现按钮,conID=必要表现的div,closeID=封锁按钮办理了: 1.可以遮挡ie6下的select元素可是在ie6下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> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Js居中弹出遮罩层结果_veryhuo.COM</title> <style type="text/css"> *{margin:0;padding:0;} #bt{border: 2px solid #000;background-color: #ccc;cursor: pointer;padding: 2px 5px;} /****订单弹出框*****/ .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;} .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;} .VeryhuoCOM dl dd.cBtn{ width:102px; height:28px; background:url(../images/member/chooseBtn.gif) no-repeat; margin-top:10px; padding:0;} .VeryhuoCOM dl dd.cBtn a{ display:block; text-align:center;} .VeryhuoCOM dl dd.cBtn a:link,.VeryhuoCOM dl dd.cBtn a:visited{ color:#000;} .VeryhuoCOM dl dd.lBtn{ float:left; display:inline; margin-left:100px;} .VeryhuoCOM dl dd.rBtn{ float:left; display:inline; margin-left:10px;} </style> </head> <body> <a id="bt">点击弹出div</a> <div style="height:1000px;"> sdfdsf <select> <option>Volvo</option> <option selected="selected">Saab</option> <option>Mercedes</option> <option>Audi</option> </select> </div> <a id="bt">点击弹出div</a> <div style="height:1000px;"> sdfdsf <select> <option>Volvo</option> <option selected="selected">Saab</option> <option>Mercedes</option> <option>Audi</option> </select> </div> <div id="VeryhuoCOM" class="VeryhuoCOM" style="display: none;"> <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">网银,<b>名誉卡</b>等付出有题目</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="#">选好了</a></dd><dd class="cBtn rBtn"><a href="#" onclick="" id="close">点击打消</a></dd> </dl> </div> <script type="text/javascript"> /* openID=表现按钮,conID=必要表现的div,closeID=封锁按钮 Downloads By http://www.veryhuo.com 办理了: 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没有透明度这里我上网搜到的功效都不能办理假如您有要领请给我留言 */ var _CalF = { //便捷要领 $ : function(id){return document.getElementById(id)}, create : function(id){return document.createElement(id)}, append : function(id){return document.body.appendChild(id)}, remove : function(id){return document.body.removeChild(id)} } function popup(openID,conID,closeID){ this.onclick(openID,conID,closeID); } popup.prototype = { cssStyle : "width:100%;position:absolute;left:0;top:0;filter:alpha(opacity = 50);opacity:0.5;border:0;overflow:auto;", createShadowDiv : function(){ //配景遮罩 var shadowDiv = _CalF.create("div"); shadowDiv.id = "shadowDiv"; shadowDiv.style.cssText = this.cssStyle; shadowDiv.style.height = document.body.scrollHeight + "px"; shadowDiv.style.backgroundColor = "#000" shadowDiv.style.zindex = 100; _CalF.append(shadowDiv); }, createIframe : function(){ //iframe var iframe = _CalF.create("iframe"); iframe.id = "shadowIframe"; iframe.style.cssText = this.cssStyle; iframe.style.height = document.body.scrollHeight + "px"; iframe.style.zindex = 99; _CalF.append(iframe); }, removeDiv : function(){ _CalF.remove(_CalF.$("shadowDiv")); _CalF.remove(_CalF.$("shadowIframe")); }, onclick : function(openID,conID,closeID){ var that = this; _CalF.$(openID).onclick = function(){ if(window.ActiveXObject){ //ie6 if(!window.XMLHttpRequest){ document.body.style.cssText = "_background-image: url(about:blank);_background-attachment: fixed;"; } } that.createIframe(); that.createShadowDiv(); _CalF.$(conID).style.display = "block"; } document.getElementById(closeID).onclick = function(){ _CalF.$(conID).style.display = "none"; that.removeDiv(); } } } var bt = new popup("bt","VeryhuoCOM","close"); </script> </body> </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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!