纯js实现遮罩层效果原理分析


Posted in Javascript onMay 27, 2014

可以说这个功能,在我理解了前面的“贪吃蛇”之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理

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()这些都是在之前出现过,应用过的了,这样我们就能实现了,其实当原理明白了的那一刻,一切也就容易多了吧。

路漫漫而修远兮啊

Javascript 相关文章推荐
jQuery模拟超链接点击效果代码
Apr 21 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
JavaScript严格模式详解
Nov 18 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
浅谈webpack4 图片处理汇总
Sep 12 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 #Javascript
JQuery获取表格数据示例代码
May 26 #Javascript
chrome下img加载对height()的影响示例探讨
May 26 #Javascript
chrome下jq width()方法取值为0的解决方法
May 26 #Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 #Javascript
JQuery实现table行折叠效果以JSON做数据源
May 26 #Javascript
jquery attr方法获取input的checked属性问题
May 26 #Javascript
You might like
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
jQuery 自定义函数写法分享
2012/03/30 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
2014/01/26 Javascript
jQuery+CSS3实现树叶飘落特效
2015/02/01 Javascript
实现前后端数据交互方法汇总
2015/04/07 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
2015/09/05 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
jquery实现文本框的禁用和启用
2016/12/07 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
[03:01]2014DOTA2国际邀请赛 小组赛7月13日TOPPLAY
2014/07/14 DOTA
Python检测QQ在线状态的方法
2015/05/09 Python
详解python基础之while循环及if判断
2017/08/24 Python
pandas.cut具体使用总结
2019/06/24 Python
使用pandas读取文件的实现
2019/07/31 Python
Pytorch释放显存占用方式
2020/01/13 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
Python图像处理库PIL的ImageFont模块使用介绍
2020/02/26 Python
django之导入并执行自定义的函数模块图解
2020/04/01 Python
解释一下Windows的消息机制
2014/01/30 面试题
后勤自我鉴定
2013/10/13 职场文书
万年牢教学反思
2014/02/15 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
创建青年文明号材料
2014/05/09 职场文书
伊琍体标语
2014/06/25 职场文书
党员一帮一活动总结
2014/07/08 职场文书
优秀纪检干部材料
2014/08/27 职场文书
年检委托书
2014/08/30 职场文书
2014领导班子四风问题查摆思想汇报
2014/09/13 职场文书
同意报考公务员证明
2015/06/17 职场文书