반투명 마스킹 효과를 달성하기 위해 CSS+JavaScript 또는 순수 js를 사용하는 공유 예

반투명 마스킹 효과를 달성하기 위해 CSS+JavaScript 또는 순수 js를 사용하는 공유 예_javascript 기술

WBOY

풀어 주다： 2016-05-16 09:00:28

원래의

2151명이 탐색했습니다.

CSS+자바스크립트
구현 원칙:
전체 화면 div를 만들고 문서 흐름에서 분리되어 다른 요소에 영향을 주지 않도록 절대 위치 지정을 사용하고 반투명 상태로 설정합니다. 물론 이 투명도는 마음대로 조정할 수 있으며, 동시에 로그인 요소를 생성하면 절대 위치 지정을 사용하고 z-index 속성 값을 화면의 div보다 크게 만듭니다. 이때 전체 화면 div에 포함되지 않습니다. 기본적으로 이 두 div의 표시 속성 값은 없음입니다. 해당 버튼을 클릭하면 표시 속성 값을 변경할 수 있습니다.

<!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>

로그인 후 복사

위는 마스크의 기본 기능을 구현한 것입니다. 마스크를 클릭하여 팝업하면 개체가 팝업되고 마스크 효과가 사라집니다.

순수 자바스크립트:
성취 효과: 창이 팝업되면 창 뒤의 페이지가 어두워져 조작할 수 없게 됩니다.

어려움: div 레이어는 선택 컨트롤을 덮을 수 없기 때문에 특별한 처리가 필요합니다. 하나는 팝업 창 아래에 iframe 레이어를 추가하여 선택 컨트롤을 추가하는 것입니다. 선택 컨트롤을 덮는 팝업 창 아래의 iframe 레이어, 먼저 선택 컨트롤을 숨기고 여기에서 두 번째 방법을 선택합니다.

구현 원칙: 페이지와 팝업창 사이에 반투명 레이어를 추가하여 페이지의 내용을 가립니다.

코드:

<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>

로그인 후 복사