CSS+JavaScript
實(shí)現(xiàn)原理:
創(chuàng)建一個滿屏的div，使用絕對定位，這樣的話它就可以脫離文檔流，對其他的元素不會產(chǎn)生影響，并且將其設(shè)置為半透明狀態(tài)，當(dāng)然這個透明度可以隨便調(diào)的，同時創(chuàng)建一個login元素，它也使用絕對定位，并將其z-index屬性值大于面屏的div，這個時候它就不會被滿屏div遮蓋。在默認(rèn)狀態(tài)下這兩個div的display屬性值是none。當(dāng)點(diǎn)擊相應(yīng)的按鈕可以更改他們的display屬性值。
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.survivalescaperooms.com/" /> <title>CSS如何實(shí)現(xiàn)彈出一個全屏灰黑色透明遮罩效果-武林網(wǎng)</title> <style type="text/css"> * { margin:0px; padding:0px; } .zhezhao { width:100%; height:100%; background-color:#000; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; position:absolute; left:0px; top:0px; display:none; z-index:1000; } .login { width:280px; height:180px; position:absolute; top:200px; left:50%; background-color:#000; margin-left:-140px; display:none; z-index:1500; } .content { margin-top:50px; color:red; line-height:200px; height:200px; text-align:center; } </style> <script type="text/javascript"> window.onload=function() { var zhezhao=document.getElementById("zhezhao"); var login=document.getElementById("login"); var bt=document.getElementById("bt"); var btclose=document.getElementById("btclose"); bt.onclick=function() { zhezhao.style.display="block"; login.style.display="block"; } btclose.onclick=function() { zhezhao.style.display="none"; login.style.display="none"; } } </script> </head> <body> <div class="zhezhao" id="zhezhao"></div> <div class="login" id="login"><button id="btclose">點(diǎn)擊關(guān)閉</button></div> <div class="content">武林網(wǎng)歡迎您，<button id="bt">點(diǎn)擊彈出遮罩</button></div> </body> </html>以上實(shí)現(xiàn)了基本的遮罩功能，當(dāng)點(diǎn)擊彈出遮罩，會彈出一個對象，當(dāng)點(diǎn)擊關(guān)閉，遮罩效果消失。
純JavaScript：
實(shí)現(xiàn)效果：彈出一個窗口的時候，窗口后面的頁面變暗，并且不能操作。
難點(diǎn)：因?yàn)閐iv層是不能把select控件遮住的，所以要特殊處理，方法兩種，一種是在彈出窗口下面加一層iframe來遮住select；第二種是所以要在彈出的時候，先把select控件隱藏，這里選擇第二種方法。
實(shí)現(xiàn)原理：在頁面上和彈出窗口中間加一個半透明的層，把頁面的內(nèi)容覆蓋掉 。
代碼：
<script language="javascript"> function Open() { //隱藏select控件 DispalySelect(0); //顯示遮罩層 document.getElementById("divPageMask").style.display="block"; //處理遮罩層 resizeMask(); window.onResize = resizeMask; //顯示彈出窗口 document.getElementById("divOpenWin").style.display="block"; } function Close() { //顯示select控件 DispalySelect(1); //處理遮罩層 divPageMask.style.width = "0px"; divPageMask.style.height = "0px"; divOpenWin.style.display = "none"; window.onResize = null; document.getElementById("divOpenWin").style.display="none"; } //頁面遮罩 function resizeMask() { divPageMask.style.width = document.body.scrollWidth; divPageMask.style.height = document.body.scrollHeight; divOpenWin.style.left = ((document.body.offsetWidth - divOpenWin.offsetWidth) / 2); divOpenWin.style.top = ((document.body.offsetHeight - divOpenWin.offsetHeight) / 2); } function DispalySelect(val) { //顯示和隱藏select控件 var dispalyType; var arrdispalyType=["hidden","visible"]; var arrObjSelect=document.getElementsByTagName("select"); for (i=0;i<arrObjSelect.length;i++) { arrObjSelect[i].style.visibility=arrdispalyType[val]; } } </script> <style type="text/css"> .body,td{font-size:12px} #divPageMask{background-color:white; filter:alpha(opacity=50);left:0px;position:absolute;top:0px;} #divOpenWin{background-color:#EEEEEE;position: absolute;left:0px;top:0px;display: none;z-index:50; width:300px;height:150px} </style> <div id="divPageMask"></div> <div id="divOpenWin"><center><a href="javascript:Close();">關(guān)閉</a></center></div> <label></label> <center> <table border="0" cellpadding="0" cellspacing="0" width="650"> <tbody> <tr> <td colspan="2" align="center" height="90"><p><img src="http://www.sopull.com/Images/Index/logo.gif" height="60" width="250"></p> <p> </p> <p> </p></td> </tr> <tr> <td height="10" style="color:#666666;font-size:13px"> </td> </tr> </tbody> </table> <table bgcolor="#e1e1e1" border="0" cellpadding="0" cellspacing="1" height="85" width="650"> <tbody> <tr> <td align="center" bgcolor="#f9f9f9"><table height=50 cellspacing=0 cellpadding=0 width=600 style="margin-top:20px"> <FORM name="f" action="http://www.sopull.com/ShopList.asp"> <tbody> <tr> <td class="searchbar_word">關(guān)鍵字：</td> <td width="241"><input type="text" name="k" size=30 /></td> <td align=middle width=101 class="searchbar_word">所在地：</td> <td align=middle width=97 id="cn"><script language="javascript" src="http://www.sopull.com/Inc/Js/ListCity.asp?CityName=北京市"></script></td> <td align=middle width=95><input name="s" type=submit value=" 搜 鋪 "></td> </tr> </form> <tr> <td width="64" height="30"> </td> <td colspan="4" valign="middle" class="search_text">例如：餐廳；電器；超市 </table></td> </tr> </tbody> </table> </center> <p align="center"> </p> <p align="center"><a href="javascript:Open();">打開遮罩</a></p> <p align="center"> </p> <table width="650" border="0" align="center" cellpadding="0" cellspacing="0"> <tbody> <!-- <tr> <td align="center" background="Images/Index/line_2.gif" width="580"><img src="Images/Index/line_2.gif" height="9" width="9"></td> </tr>--> <tr> <td class="link" align="center" height="30"><a href="#" target=_blank><font color="#FF6600">免費(fèi)提交店鋪</font></a> | <a class="toplink" href="#">店鋪推廣</a> | <a class="toplink" href="#">關(guān)于搜鋪</a> | <a class=b href="#" target=_blank>業(yè)務(wù)合作</a> | <a class="toplink" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sopull.com');return false;" >設(shè)為首頁</a> | <a class="toplink" onClick="javascript:window.external.addFavorite('http://www.sopull.com/','搜鋪網(wǎng)-中國最大店鋪搜索引擎')" >加入收藏</a> </td> </tr> <tr> <td align="center" height="30">©2007 搜鋪網(wǎng) 粵ICP備07006767號</td> </tr> </tbody> </table> 新聞熱點(diǎn)
疑難解答
