本文實例講述了JavaScript實現(xiàn)彈出DIV層同時頁面背景漸變成半透明效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>JavaScript彈出DIV層，頁面背景漸變成半透明</title><style>html,body{font-size:12px;margin:0px;height:100%;}.mesWindow{border:#666 1px solid;background:#fff;}.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}.mesWindowContent{margin:4px;font-size:12px;}.mesWindow .close{height:15px;width:28px;border:none;cursor:pointer;text-decoration:underline;background:#fff}</style><script>var isIe=(document.all)?true:false;//設置select的可見狀態(tài)function setSelectState(state){var objl=document.getElementsByTagName('select');for(var i=0;i<objl.length;i++){objl[i].style.visibility=state;}}function mousePosition(ev){if(ev.pageX || ev.pageY){return {x:ev.pageX, y:ev.pageY};}return {x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,y:ev.clientY + document.body.scrollTop - document.body.clientTop};}//彈出方法function showMessageBox(wTitle,content,pos,wWidth){closeWindow();var bWidth=parseInt(document.documentElement.scrollWidth);var bHeight=parseInt(document.documentElement.scrollHeight);if(isIe){setSelectState('hidden');}var back=document.createElement("div");back.id="back";var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;";styleStr+=(isIe)?"filter:alpha(opacity=0);":"opacity:0;";back.style.cssText=styleStr;document.body.appendChild(back);showBackground(back,50);var mesW=document.createElement("div");mesW.id="mesWindow";mesW.className="mesWindow";mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+wTitle+"</td><td style='width:1px;'><input type='button' onclick='closeWindow();' title='關(guān)閉窗口' class='close' value='關(guān)閉' /></td></tr></table></div><div class='mesWindowContent' id='mesWindowContent'>"+content+"</div><div class='mesWindowBottom'></div>";styleStr="left:"+(((pos.x-wWidth)>0)?(pos.x-wWidth):pos.x)+"px;top:"+(pos.y)+"px;position:absolute;width:"+wWidth+"px;";mesW.style.cssText=styleStr;document.body.appendChild(mesW);}//讓背景漸漸變暗function showBackground(obj,endInt){if(isIe){obj.filters.alpha.opacity+=1;if(obj.filters.alpha.opacity<endInt){setTimeout(function(){showBackground(obj,endInt)},5);}}else{var al=parseFloat(obj.style.opacity);al+=0.01;obj.style.opacity=al;if(al<(endInt/100)){setTimeout(function(){showBackground(obj,endInt)},5);}}}//關(guān)閉窗口function closeWindow(){if(document.getElementById('back')!=null){document.getElementById('back').parentNode.removeChild(document.getElementById('back'));}if(document.getElementById('mesWindow')!=null){document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));}if(isIe){setSelectState('');}}//測試彈出function testMessageBox(ev){var objPos = mousePosition(ev);messContent="<div style='padding:20px 0 20px 0;text-align:center'>消息正文</div>";showMessageBox('窗口標題',messContent,objPos,350);}</script></head><body><div style="padding:20px"><div style="text-align:left";><a href="#none" onclick="testMessageBox(event);">彈出窗口</a></div><div style="text-align:left;padding-left:20px;padding-top:10px";><select ID="Select1" NAME="Select1"><option>下拉</option></select>彈出窗口時會將其隱藏，關(guān)閉時會讓其顯示，目的是在IE中防止彈出的DIV擋不住下拉框</div><div style="text-align:center";><a href="#none" onclick="testMessageBox(event);">彈出窗口</a></div><div style="text-align:right";><a href="#none" onclick="testMessageBox(event);">彈出窗口</a></div></div><br /></body></html>更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
