纯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 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
Jan 22 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
js实现简单随机抽奖的方法
Jan 27 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
jQuery插件实现文件上传功能(支持拖拽)
Aug 27 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
js实现图片懒加载效果
Jul 17 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
使用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中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
javascript函数中的arguments参数
2010/08/01 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
ext中store.load跟store.reload的区别示例介绍
2014/06/17 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2014/09/04 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
js比较日期大小的方法
2015/05/12 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python实现simhash算法实例
2014/04/25 Python
Python进程间通信用法实例
2015/06/04 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
Python类class参数self原理解析
2020/11/19 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
美国帽子俱乐部商店:Hat Club
2019/07/05 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
工程质量月活动方案
2014/02/19 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
房屋买卖协议书
2014/04/10 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
个人欠条范本
2015/07/03 职场文书
严以律己专题学习研讨会发言材料
2015/11/09 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers