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

来源：阅读：863 次日期：2016-07-01 16:16:33

温馨提示：小编为您整理了“使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享”,方便广大网友查阅！

这篇文章主要介绍了使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享,编写半透明遮罩层时要注意定位问题、不要满屏遮罩,需要的朋友可以参考下

CSS+JavaScript

实现原理:

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

<!DOCTYPE html>

<html>

<head>

<title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-脚本之家</title>

{

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>

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

}

btclose.onclick=function()

{

zhezhao.style.display="none";

}

</script>

</head>

<body>

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

</body>

</html>

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

纯JavaScript：

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

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

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

代码：

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>

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

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

<tbody>

<tr>

<tbody>

<tr>

</tr>

</form>

<tr>

<td colspan="4" valign="middle" class="search_text">例如：餐厅；电器；超市

</table></td>

</tr>

</tbody>

</table>

</center>

<tbody>

<!-- <tr>

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

</tr>

</tbody>

</table>

上一篇：JavaScript编写点击查看大图的页面半透明遮罩层效果实例

下一篇：Bootstrap模仿起筷首页效果

手机网站地址：使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！