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沒有透明度這裡我上網搜到的結果都不能解決如果您有方法請給我留言

複製程式碼 程式碼如下: Js制作简单弹出层DIV在页面居中 中间显示 遮罩 方法 *{margin:0;padding:0;} #bt{border: 2px solid #000;background-color: #ccc;cursor: pointer;padding: 2px 5px;} /****订单弹出框*****/ .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;} .orderMsg dl{ overflow:hidden; padding:20px; margin:0;} .orderMsg dl dt{ line-height:30px;} .orderMsg dl dd{ line-height:25px; height:25px; padding-left:10px; margin:0;} .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;} 点击弹出div sdfdsf Volvo Saab Mercedes Audi 点击弹出div sdfdsf Volvo Saab Mercedes Audi 请您告知我们取消订单的原因，以便我们改进。非常感谢! 改变主意,现在不想买了 刚才信息填错了,要重新下单 先取消,再更换或添加新商品 网银,信用卡等支付有问题 等待时间过长,不耐烦了 商品价格较贵 出现商品缺货情况 其它的原因 72小时到期自动取消(不可选) 选好了 点击取消 /* 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"); } 4umentElement.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)append : function(id){return document.body.appendChild(id)append : function(id){return document.body.appendChild(id)append : function(id){return document.body.appendChild(id)append, 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);orderopacity:0.5;top:0;filter:alpha(opacity = 50);orderopacity:0.5;orderb :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" _CalF.append(shadowDiv); }, createIframe : function(){ //iframe var iframe = _CalF.create("iframe"); if .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.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-attachmentmentmentment : fixed;"; } } that.createIframe(); that.createShadowDiv(); _CalF.$(conID).style.display = "block"; _CalF.$(conID).style.display = "block"; } document.getElementById(closeID).onclick = function(){ _CalF.$(conID).style.display = "none"; that.removeDiv(); } } } var bt = new popup("bt","orderMsg","close");

Js製作簡單彈出層DIV在頁面居中 中間顯示遮罩的具體方法_javascript技巧

Js製作簡單彈出層DIV在頁面居中中間顯示遮罩的具體方法_javascript技巧