Js制作简单弹出层DIV在页面居中 中间显示 遮罩 方法
<div id="cnblogs_post_body">效果预览:http://jsfiddle.net/dtdxrk/LaZ7v/embedded/result/
这两天要用到正好练练手,比想象中碰到的问题要多,比如:
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没有透明度 这里我上网搜到的结果都不能解决 如果您有方法请给我留言
<div class="cnblogs_code">1 <!DOCTYPE HTML>2 <head>3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />4 <title>Js制作简单弹出层DIV在页面居中 中间显示 遮罩 方法</title>5 <style type="text/css">6 *{margin:0;padding:0;}7 #bt{border: 2px solid #000;background-color: #ccc;cursor: pointer;padding: 2px 5px;}8 9 /****订单弹出框*****/ 10 .orderMsg{ 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;} 11 .orderMsg dl{ overflow:hidden; padding:20px; margin:0;} 12 .orderMsg dl dt{ line-height:30px;} 13 .orderMsg dl dd{ line-height:25px; height:25px; padding-left:10px; margin:0;} 14 .orderMsg dl dd label{ padding-left:5px;} 15 .orderMsg dl dd.cBtn{ width:102px; height:28px; background:url(../images/member/chooseBtn.gif) no-repeat; margin-top:10px; padding:0;} 16 .orderMsg dl dd.cBtn a{ display:block;text-align:center;} 17 .orderMsg dl dd.cBtn a:link,.orderMsg dl dd.cBtn a:visited{ color:#000;} 18 .orderMsg dl dd.lBtn{ float:left; display:inline; margin-left:100px;} 19 .orderMsg dl dd.rBtn{ float:left; display:inline; margin-left:10px;} 20 </style> 21 </head> 22 <body> 23<a id="bt">点击弹出div</a> 24 <div style="height:1000px;"> 25 sdfdsf 26 <select> 27 <option>Volvo</option> 28 <option selected="selected">Saab</option> 29 <option>Mercedes</option> 30 <option>Audi</option> 31 </select> 32 </div> 33 34<a id="bt">点击弹出div</a> 35 36 <div style="height:1000px;"> 37 sdfdsf 38 <select> 39 <option>Volvo</option> 40 <option selected="selected">Saab</option> 41 <option>Mercedes</option> 42 <option>Audi</option> 43 </select> 44 </div> 45 46 <div id="orderMsg" class="orderMsg" style="display: none;"> 47 <dl> 48 <dt>请您告知我们取消订单的原因，以便我们改进。非常感谢!</dt> 49 <dd><input type="radio" name="reason" id="reason1"><label for="reason1">改变主意,现在不想买了</label></dd> 50 <dd><input type="radio" name="reason" id="reason2"><label for="reason2">刚才信息填错了,要重新下单</label></dd> 51 <dd><input type="radio" name="reason" id="reason3"><label for="reason3">先取消,再更换或添加新商品</label></dd> 52 <dd><input type="radio" name="reason" id="reason4"><label for="reason4">网银,信用卡等支付有问题</label></dd> 53 <dd><input type="radio" name="reason" id="reason5"><label for="reason5">等待时间过长,不耐烦了</label></dd> 54 <dd><input type="radio" name="reason" id="reason6"><label for="reason6">商品价格较贵</label></dd> 55 <dd><input type="radio" name="reason" id="reason7"><label for="reason7">出现商品缺货情况</label></dd> 56 <dd><input type="radio" name="reason" id="reason8"><label for="reason8">其它的原因</label></dd> 57 <dd><input type="radio" disabled="disabled"><label>72小时到期自动取消(不可选)</label></dd> 58 <dd class="cBtn lBtn"><a href="#">选好了</a></dd><dd class="cBtn rBtn"><a href="#" onclick="" id="close">点击取消</a></dd> 59 </dl> 60 </div> 61 62 <script type="text/javascript"> 63 /* 64 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 65 66 解决了: 67 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度 68 2.弹出的div可以一直在浏览器屏幕中间显示 69 70 问题: 71 1.目前不支持.class 只支持#id 72 2.需要显示的div需要自己设置css 73 3.在ie6下需要设置css 74 例如div {_position: absolute;_top: expression(documentElement.scrollTop + 340 + "px"); } 75 4.ie6下背景div没有透明度 这里我上网搜到的结果都不能解决 如果您有方法请给我留言 76 */ 77 78 var _CalF = { //便捷方法 79 $ : function(id){return document.getElementById(id)}, 80 create : function(id){return document.createElement(id)}, 81 append : function(id){return document.body.appendChild(id)}, 82 remove : function(id){return document.body.removeChild(id)} 83 } 84 85 function popup(openID,conID,closeID){ 86 this.onclick(openID,conID,closeID); 87 } 88 89 popup.prototype = { 90 91 cssStyle : "width:100%;position:absolute;left:0;top:0;filter:alpha(opacity = 50);opacity:0.5;border:0;overflow:auto;", 92 93 createShadowDiv : function(){ //背景遮罩 94 var shadowDiv = _CalF.create("div"); 95 shadowDiv.id = "shadowDiv"; 96 shadowDiv.style.cssText = this.cssStyle; 97 shadowDiv.style.height = document.body.scrollHeight + "px"; 98 shadowDiv.style.backgroundColor = "#000" 99 shadowDiv.style.zindex = 100;100 _CalF.append(shadowDiv);101 },102 103 createIframe : function(){//iframe104 var iframe = _CalF.create("iframe");105 iframe.id = "shadowIframe";106 iframe.style.cssText = this.cssStyle;107 iframe.style.height = document.body.scrollHeight + "px";108 iframe.style.zindex = 99;109 _CalF.append(iframe);110 },111 112 removeDiv : function(){113 _CalF.remove(_CalF.$("shadowDiv"));114 _CalF.remove(_CalF.$("shadowIframe"));115 },116 117 118 onclick : function(openID,conID,closeID){119 var that = this;120 121 _CalF.$(openID).onclick = function(){122 123 if(window.ActiveXObject){ //ie6124 if(!window.XMLHttpRequest){125 document.body.style.cssText = "_background-image: url(about:blank);_background-attachment: fixed;";126 }127 } 128 129 that.createIframe();130 that.createShadowDiv();131 _CalF.$(conID).style.display = "block";132 }133 134 document.getElementById(closeID).onclick = function(){135 _CalF.$(conID).style.display = "none";136 that.removeDiv(); 137 }138 }139 140 }141 142 var bt = new popup("bt","orderMsg","close");143 144 </script>145 </body>146 </html>
页:
[1]