纯js实现遮罩层效果原理分析
更新时间：2014年05月27日 08:53:37 作者：
这篇文章主要介绍了纯js实现遮罩层效果，下面就它的原理做下分析，感兴趣的朋友可以参考下
可以说这个功能，在我理解了前面的“贪吃蛇”之后，实在是与刚开始想象的难度差了好多，当然是这种方式有取巧之嫌，终归是实现了功能，我们来进行分析整理
1、实现原理
本片文章的 是实现原理如下：
* 实际上弹出层、遮罩层和原页面显示分别为三个不同的div
* 弹出层的层级在遮罩层之上，遮罩层的层级在原页面显示之上；
* 遮罩层有通明效果
* 遮罩层没有实际意义，则无需在html部分就写上，当然写上同样可以实现
2、代码实现
html语言如下：
<html>
....
<body>
<center>
<div ><input type="button" value="go" onclick="show()"></div>
<div id="alert" style="display:none;">
<form>
登录
<input type="text"><input type="password"><input type="submit" value="login">
</form>
</div>
</center>
</body>
</html>
javascript实现弹出层和遮罩层：
<span style="font-size:12px;">function show(){
var alertPart=document.getElementById("alert");
alertPart.style.display="block";
alertPart.style.position = "absolute";
alertPart.style.top = "50%";
alertPart.style.left = "50%";
alertPart.style.marginTop = "-75px";
alertPart.style.marginLeft = "-150px";
alertPart.style.background="cyan";
alertPart.style.width="300px";
alertPart.style.height="200px";
alertPart.style.zIndex = "501";
var mybg = document.createElement("div");
mybg.setAttribute("id","mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);
document.body.style.overflow = "hidden";
}
</script></span>
这里用z-index来区分层级，opacity和filter：alpha（opacity=）透明度，document.createElement("div")和document.body.appendChild()这些都是在之前出现过，应用过的了，这样我们就能实现了，其实当原理明白了的那一刻，一切也就容易多了吧。
路漫漫而修远兮啊
1、实现原理
本片文章的 是实现原理如下：
* 实际上弹出层、遮罩层和原页面显示分别为三个不同的div
* 弹出层的层级在遮罩层之上，遮罩层的层级在原页面显示之上；
* 遮罩层有通明效果
* 遮罩层没有实际意义，则无需在html部分就写上，当然写上同样可以实现
2、代码实现
html语言如下：
复制代码 代码如下:
<html>
....
<body>
<center>
<div ><input type="button" value="go" onclick="show()"></div>
<div id="alert" style="display:none;">
<form>
登录
<input type="text"><input type="password"><input type="submit" value="login">
</form>
</div>
</center>
</body>
</html>
javascript实现弹出层和遮罩层：
复制代码 代码如下:
<span style="font-size:12px;">function show(){
var alertPart=document.getElementById("alert");
alertPart.style.display="block";
alertPart.style.position = "absolute";
alertPart.style.top = "50%";
alertPart.style.left = "50%";
alertPart.style.marginTop = "-75px";
alertPart.style.marginLeft = "-150px";
alertPart.style.background="cyan";
alertPart.style.width="300px";
alertPart.style.height="200px";
alertPart.style.zIndex = "501";
var mybg = document.createElement("div");
mybg.setAttribute("id","mybg");
mybg.style.background = "#000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "500";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);
document.body.style.overflow = "hidden";
}
</script></span>
这里用z-index来区分层级，opacity和filter：alpha（opacity=）透明度，document.createElement("div")和document.body.appendChild()这些都是在之前出现过，应用过的了，这样我们就能实现了，其实当原理明白了的那一刻，一切也就容易多了吧。
路漫漫而修远兮啊
相关文章
对于js中的对象的深拷贝在项目的开发中比较常用到,这篇文章主要给大家介绍了关于JS中不一样的深拷贝的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了JavaScript闭包的简单应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
JavaScript中 ES6 generator数据类型详解
generator 是ES6引入的新的数据类型，由function* 定义, (注意*号),接下来通过本文给大家介绍js中 ES6 generator数据类型，非常不错，感兴趣的朋友一起学习吧2016-08-08
本文主要介绍了js递归和定时器的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
在以前，总是以为使用用户代理字符串检测浏览器是那种类型就行了，这样确实大错特错啊，下面就来说说如何通过js判断出当前浏览者使用的的设备类型呢2015-12-12
这篇文章主要为大家详细介绍了微信小程序实现弹球游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
今天小编就为大家分享一篇使用layui的router来进行传参的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
js模拟弹窗效果代码，用层实现提示效果代码2008-04-04
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等),经验积累，感兴趣的朋友可以了解下，一定会对你有帮助的2013-01-01
这篇文章主要介绍了javascript中this用法,结合具体实例形式详细分析了javascript中this的含义及对象、函数等各种调用中的使用技巧,需要的朋友可以参考下2017-04-04
最新评论