使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
CSS+JavaScript
实现原理:
创建一个满屏的div，使用绝对定位，这样的话它就可以脱离文档流，对其他的元素不会产生影响，并且将其设置为半透明状态，当然这个透明度可以随便调的，同时创建一个login元素，它也使用绝对定位，并将其z-index属性值大于面屏的div，这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<metaname="author"content="https://www.nhooo.com/"/>
<title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-毛票票</title>
<styletype="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>
<scripttype="text/javascript">
window.onload=function()
{
varzhezhao=document.getElementById("zhezhao");
varlogin=document.getElementById("login");
varbt=document.getElementById("bt");
varbtclose=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>
<divclass="zhezhao"id="zhezhao"></div>
<divclass="login"id="login"><buttonid="btclose">点击关闭</button></div>
<divclass="content">毛票票欢迎您，<buttonid="bt">点击弹出遮罩</button></div>
</body>
</html>
以上实现了基本的遮罩功能，当点击弹出遮罩，会弹出一个对象，当点击关闭，遮罩效果消失。
纯JavaScript：
实现效果：弹出一个窗口的时候，窗口后面的页面变暗，并且不能操作。
难点：因为div层是不能把select控件遮住的，所以要特殊处理，方法两种，一种是在弹出窗口下面加一层iframe来遮住select；第二种是所以要在弹出的时候，先把select控件隐藏，这里选择第二种方法。
实现原理：在页面上和弹出窗口中间加一个半透明的层，把页面的内容覆盖掉。
代码：
<scriptlanguage="javascript">
functionOpen()
{
//隐藏select控件
DispalySelect(0);
//显示遮罩层
document.getElementById("divPageMask").style.display="block";
//处理遮罩层
resizeMask();
window.onResize=resizeMask;
//显示弹出窗口
document.getElementById("divOpenWin").style.display="block";
}
functionClose()
{
//显示select控件
DispalySelect(1);
//处理遮罩层
divPageMask.style.width="0px";
divPageMask.style.height="0px";
divOpenWin.style.display="none";
window.onResize=null;
document.getElementById("divOpenWin").style.display="none";
}
//页面遮罩
functionresizeMask()
{
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);
}
functionDispalySelect(val)
{//显示和隐藏select控件
vardispalyType;
vararrdispalyType=["hidden","visible"];
vararrObjSelect=document.getElementsByTagName("select");
for(i=0;i<arrObjSelect.length;i++)
{
arrObjSelect[i].style.visibility=arrdispalyType[val];
}
}
</script>
<styletype="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>
<divid="divPageMask"></div>
<divid="divOpenWin"><center><ahref="javascript:Close();">关闭</a></center></div>
<label></label>
<center>
<tableborder="0"cellpadding="0"cellspacing="0"width="650">
<tbody>
<tr>
<tdcolspan="2"align="center"height="90"><p><imgsrc="http://www.sopull.com/Images/Index/logo.gif"height="60"width="250"></p>
<p> </p>
<p> </p></td>
</tr>
<tr>
<tdheight="10"style="color:#666666;font-size:13px"> </td>
</tr>
</tbody>
</table>
<tablebgcolor="#e1e1e1"border="0"cellpadding="0"cellspacing="1"height="85"width="650">
<tbody>
<tr>
<tdalign="center"bgcolor="#f9f9f9"><tableheight=50cellspacing=0cellpadding=0width=600style="margin-top:20px">
<FORMname="f"action="http://www.sopull.com/ShopList.asp">
<tbody>
<tr>
<tdclass="searchbar_word">关键字：</td>
<tdwidth="241"><inputtype="text"name="k"size=30/></td>
<tdalign=middlewidth=101class="searchbar_word">所在地：</td>
<tdalign=middlewidth=97id="cn"><scriptlanguage="javascript"src="http://www.sopull.com/Inc/Js/ListCity.asp?CityName=北京市"></script></td>
<tdalign=middlewidth=95><inputname="s"type=submitvalue="搜铺"></td>
</tr>
</form>
<tr>
<tdwidth="64"height="30"> </td>
<tdcolspan="4"valign="middle"class="search_text">例如：餐厅；电器；超市
</table></td>
</tr>
</tbody>
</table>
</center>
<palign="center"> </p>
<palign="center"><ahref="javascript:Open();">打开遮罩</a></p>
<palign="center"> </p>
<tablewidth="650"border="0"align="center"cellpadding="0"cellspacing="0">
<tbody>
<!--<tr>
<tdalign="center"background="Images/Index/line_2.gif"width="580"><imgsrc="Images/Index/line_2.gif"height="9"width="9"></td>
</tr>-->
<tr>
<tdclass="link"align="center"height="30"><ahref="#"target=_blank><fontcolor="#FF6600">免费提交店铺</font></a> | <aclass="toplink"href="#">店铺推广</a> | <aclass="toplink"href="#">关于搜铺</a> | <aclass=bhref="#"target=_blank>业务合作</a> | <aclass="toplink"onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sopull.com');returnfalse;"href="http://www.sopull.com/#">设为首页</a> | <aclass="toplink"onClick="javascript:window.external.addFavorite('http://www.sopull.com/','搜铺网-中国最大店铺搜索引擎')"href="http://www.sopull.com/#">加入收藏</a></td>
</tr>
<tr>
<tdalign="center"height="30">©2007搜铺网 粤ICP备07006767号</td>
</tr>
</tbody>
</table>