您當前位置：首頁 > web前端 > 特效 > Js彈出DIV遮罩層并在頁面居中顯示效果

Js彈出DIV遮罩層并在頁面居中顯示效果

來源：程序員人生發布時間：2014-03-11 17:55:38 閱讀次數：4633次

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居中彈出遮罩層效果_wfuyu.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">網銀,信用卡等支付有問題</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.vxbq.cn解決了:1.可以遮擋ie6下的select元素但是在ie6下div沒有透明度2.彈出的div可以一直在瀏覽器屏幕中間顯示問題:1.目前不支持.class 只支持#id2.需要顯示的div需要自己設置css3.在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(){ //iframevar 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){ //ie6if(!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.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></div>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 CSS教程：scrollbar的屬性及樣式分類

下一篇 JavaScript實現下拉框自動提示效果

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

Js彈出DIV遮罩層并在頁面居中顯示效果