Beispielfreigabe für die Verwendung von CSS+JavaScript oder reinem JS, um transluzente Maskierungseffekt_Javascript-Fähigkeiten zu erreichen-js-Tutorial-php.cn

Beispielfreigabe für die Verwendung von CSS+JavaScript oder reinem JS, um transluzente Maskierungseffekt_Javascript-Fähigkeiten zu erreichen

WBOY

Freigeben： 2016-05-16 09:00:28

Original

2151 Leute haben es durchsucht

CSS+JavaScript
Umsetzungsprinzip:
Erstellen Sie ein Vollbild-Div, verwenden Sie die absolute Positionierung, damit es vom Dokumentfluss getrennt werden kann und andere Elemente nicht beeinträchtigt, und versetzen Sie es in einen halbtransparenten Zustand. Diese Transparenz kann natürlich nach Belieben angepasst werden Erstellen Sie gleichzeitig ein Login-Element, es verwendet auch die absolute Positionierung und macht seinen Z-Index-Attributwert größer als den Div auf dem Bildschirm. Zu diesem Zeitpunkt wird er nicht vom Vollbild-Div abgedeckt. Standardmäßig ist der Anzeigeattributwert dieser beiden Divs „none“. Ihre Anzeigeattributwerte können durch Klicken auf die entsprechenden Schaltflächen geändert werden.

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="/" /> 

<title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-脚本之家</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">点击关闭</button></div> 

 <div class="content">脚本之家欢迎您，<button id="bt">点击弹出遮罩</button></div> 

</body> 

</html>

Nach dem Login kopieren

Das Obige implementiert die grundlegende Maskenfunktion. Wenn Sie auf die Maske klicken, um sie zu öffnen, wird ein Objekt angezeigt. Wenn Sie darauf klicken, um sie zu schließen, verschwindet der Maskeneffekt.

Reines JavaScript:
Erfolgseffekt: Wenn ein Fenster geöffnet wird, wird die Seite hinter dem Fenster dunkel und kann nicht bedient werden.

Schwierigkeit: Da die div-Ebene das ausgewählte Steuerelement nicht abdecken kann, gibt es zwei Methoden: Eine besteht darin, eine iframe-Ebene unter dem Popup-Fenster hinzuzufügen Ebene des Iframes unter dem Popup-Fenster, um das Auswahlsteuerelement abzudecken. Blenden Sie zunächst das Auswahlsteuerelement aus und wählen Sie hier die zweite Methode aus.

Implementierungsprinzip: Fügen Sie zwischen der Seite und dem Popup-Fenster eine durchscheinende Ebene hinzu, um den Inhalt der Seite abzudecken.

Code:

<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();">关闭</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">关键字：</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&#63;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">免费提交店铺</font></a> |  <a class="toplink" href="#">店铺推广</a> |  <a class="toplink" href="#">关于搜铺</a> |  <a class=b href="#" target=_blank>业务合作</a>  |  <a class="toplink" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sopull.com');return false;" href="http://www.sopull.com/#">设为首页</a> |  <a class="toplink" onClick="javascript:window.external.addFavorite('http://www.sopull.com/','搜铺网-中国最大店铺搜索引擎')" href="http://www.sopull.com/#">加入收藏</a> </td> 
 </tr> 
 <tr> 
 <td align="center" height="30">&copy;2007 搜铺网     粤ICP备07006767号</td> 
 </tr> 
 </tbody> 
</table>

Nach dem Login kopieren