亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

使用CSS+JavaScript或純js實(shí)現(xiàn)半透明遮罩效果的實(shí)例分享

 更新時(shí)間：2016年05月09日 17:53:48   作者：hbxiao135  
這篇文章主要介紹了使用CSS+JavaScript或純js實(shí)現(xiàn)半透明遮罩效果的實(shí)例分享,編寫半透明遮罩層時(shí)要注意定位問(wèn)題、不要滿屏遮罩,需要的朋友可以參考下

CSS+JavaScript
實(shí)現(xiàn)原理:
創(chuàng)建一個(gè)滿屏的div，使用絕對(duì)定位，這樣的話它就可以脫離文檔流，對(duì)其他的元素不會(huì)產(chǎn)生影響，并且將其設(shè)置為半透明狀態(tài)，當(dāng)然這個(gè)透明度可以隨便調(diào)的，同時(shí)創(chuàng)建一個(gè)login元素，它也使用絕對(duì)定位，并將其z-index屬性值大于面屏的div，這個(gè)時(shí)候它就不會(huì)被滿屏div遮蓋。在默認(rèn)狀態(tài)下這兩個(gè)div的display屬性值是none。當(dāng)點(diǎn)擊相應(yīng)的按鈕可以更改他們的display屬性值。

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="http://chabaoo.cn/" /> 

<title>CSS如何實(shí)現(xiàn)彈出一個(gè)全屏灰黑色透明遮罩效果-腳本之家</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">腳本之家歡迎您，<button id="bt">點(diǎn)擊彈出遮罩</button></div> 

</body> 

</html>

以上實(shí)現(xiàn)了基本的遮罩功能，當(dāng)點(diǎn)擊彈出遮罩，會(huì)彈出一個(gè)對(duì)象，當(dāng)點(diǎn)擊關(guān)閉，遮罩效果消失。


純JavaScript：
實(shí)現(xiàn)效果：彈出一個(gè)窗口的時(shí)候，窗口后面的頁(yè)面變暗，并且不能操作。

難點(diǎn)：因?yàn)閐iv層是不能把select控件遮住的，所以要特殊處理，方法兩種，一種是在彈出窗口下面加一層iframe來(lái)遮住select；第二種是所以要在彈出的時(shí)候，先把select控件隱藏，這里選擇第二種方法。

實(shí)現(xiàn)原理：在頁(yè)面上和彈出窗口中間加一個(gè)半透明的層，把頁(yè)面的內(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"; 
} 
//頁(yè)面遮罩 
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>&nbsp;</p> 
 <p>&nbsp;</p></td> 
 </tr> 
 <tr> 
 <td height="10" style="color:#666666;font-size:13px">&nbsp;</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">&nbsp;</td> 
 <td colspan="4" valign="middle" class="search_text">例如：餐廳；電器；超市 
 </table></td> 
 </tr> 
 </tbody> 
 </table> 
</center> 
<p align="center">&nbsp;</p> 
<p align="center"><a href="javascript:Open();">打開(kāi)遮罩</a></p> 
<p align="center">&nbsp;</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>&nbsp;|&nbsp; <a class="toplink" href="#">店鋪推廣</a>&nbsp;|&nbsp; <a class="toplink" href="#">關(guān)于搜鋪</a>&nbsp;|&nbsp; <a class=b href="#" target=_blank>業(yè)務(wù)合作</a> &nbsp;|&nbsp; <a class="toplink" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sopull.com');return false;" >設(shè)為首頁(yè)</a>&nbsp;|&nbsp; <a class="toplink" onClick="javascript:window.external.addFavorite('http://www.sopull.com/','搜鋪網(wǎng)-中國(guó)最大店鋪搜索引擎')" >加入收藏</a> </td> 
 </tr> 
 <tr> 
 <td align="center" height="30">&copy;2007 搜鋪網(wǎng) &nbsp;&nbsp;&nbsp;&nbsp;粵ICP備07006767號(hào)</td> 
 </tr> 
 </tbody> 
</table>


相關(guān)文章

  • javascript得到當(dāng)前頁(yè)的來(lái)路即前一頁(yè)地址的方法

    javascript得到當(dāng)前頁(yè)的來(lái)路即前一頁(yè)地址的方法

    這篇文章主要介紹了javascript得到當(dāng)前頁(yè)的來(lái)路即前一頁(yè)地址的方法,需要的朋友可以參考下
    2014-02-02
  • javscript 數(shù)組扁平化的實(shí)現(xiàn)

    javscript 數(shù)組扁平化的實(shí)現(xiàn)

    這篇文章主要介紹了javscript 數(shù)組扁平化的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02
  • js fromCharCode輸出26個(gè)字母的代碼

    js fromCharCode輸出26個(gè)字母的代碼

    這個(gè)代碼比較簡(jiǎn)單主要是用到了fromCharCode的特性
    2008-11-11
  • JavaScript實(shí)現(xiàn)單點(diǎn)登錄的示例

    JavaScript實(shí)現(xiàn)單點(diǎn)登錄的示例

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)單點(diǎn)登錄的示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下
    2020-09-09
  • JavaScript中字符串(string)轉(zhuǎn)json的2種方法

    JavaScript中字符串(string)轉(zhuǎn)json的2種方法

    這篇文章主要介紹了JavaScript中字符串(string)轉(zhuǎn)json的2種方法,兩種方法分別是使用js函數(shù)eval()和、使用jquery.parseJSON()方法,需要的朋友可以參考下
    2015-06-06
  • ?JavaScript+HarmonyOS?實(shí)現(xiàn)一個(gè)手繪板

    ?JavaScript+HarmonyOS?實(shí)現(xiàn)一個(gè)手繪板

    這篇文章主要介紹了?JavaScript+HarmonyOS?實(shí)現(xiàn)一個(gè)手繪板，利用openHarmony內(nèi)置的API?cnavas組件實(shí)現(xiàn)，具體詳細(xì)內(nèi)容需要的小伙伴可以參考一下
    2022-07-07
  • JavaScript實(shí)現(xiàn)可拖拽的拖動(dòng)層Div實(shí)例

    JavaScript實(shí)現(xiàn)可拖拽的拖動(dòng)層Div實(shí)例

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)可拖拽的拖動(dòng)層Div的方法,拖拽頁(yè)面中的div塊可實(shí)現(xiàn)div塊按照拖動(dòng)軌跡移動(dòng)的效果,涉及javascript鼠標(biāo)事件、頁(yè)面元素樣式結(jié)合事件函數(shù)動(dòng)態(tài)操作的相關(guān)技巧,需要的朋友可以參考下
    2015-08-08
  • JS的replace方法介紹

    JS的replace方法介紹

    replace() 方法的參數(shù) replacement 可以是函數(shù)而不是字符串。在這種情況下，每個(gè)匹配都調(diào)用該函數(shù)，它返回的字符串將作為替換文本使用
    2012-10-10
  • Mozilla 表達(dá)式 __noSuchMethod__

    Mozilla 表達(dá)式 __noSuchMethod__

    這是一個(gè)很特殊的方法，但是其存在的意義很大。不過(guò)很可惜只有firefox支持了。一個(gè)簡(jiǎn)單的例子解釋一下它的用處
    2009-04-04
  • 純JS開(kāi)發(fā)baguetteBox.js響應(yīng)式畫廊插件

    純JS開(kāi)發(fā)baguetteBox.js響應(yīng)式畫廊插件

    這篇文章主要介紹了純JS開(kāi)發(fā)baguetteBox.js響應(yīng)式畫廊插件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-06-06

最新評(píng)論