使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享

前端技术 2023/09/02 JavaScript

CSS+JavaScript
实现原理:
创建一个满屏的div，使用绝对定位，这样的话它就可以脱离文档流，对其他的元素不会产生影响，并且将其设置为半透明状态，当然这个透明度可以随便调的，同时创建一个login元素，它也使用绝对定位，并将其z-index属性值大于面屏的div，这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=\" utf-8\"> 

<meta name=\"author\" content=\"http://www.phpstudy.net/\" /> 

<title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-phpstudy</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\">phpstudy欢迎您，<button id=\"bt\">点击弹出遮罩</button></div> 

</body> 

</html>

以上实现了基本的遮罩功能，当点击弹出遮罩，会弹出一个对象，当点击关闭，遮罩效果消失。


纯JavaScript：
实现效果：弹出一个窗口的时候，窗口后面的页面变暗，并且不能操作。

难点：因为div层是不能把select控件遮住的，所以要特殊处理，方法两种，一种是在弹出窗口下面加一层iframe来遮住select；第二种是所以要在弹出的时候，先把select控件隐藏，这里选择第二种方法。

实现原理：在页面上和弹出窗口中间加一个半透明的层，把页面的内容覆盖掉 。

代码：

<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?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\">©2007 搜铺网     粤ICP备07006767号</td> 
 </tr> 
 </tbody> 
</table>


本文地址：https://www.stayed.cn/item/5141

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案