纯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 相关文章推荐
JavaScript中的字符串操作详解
Nov 12 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
JavaScript数组去重的3种方法和代码实例
Jul 01 Javascript
JavaScript 对象深入学习总结(经典)
Sep 29 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 Javascript
javascript实现简单页面倒计时
Mar 02 Javascript
element tree树形组件回显数据问题解决
Aug 14 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
教你IIS6的PHP最佳配置方法
2006/09/05 PHP
一个PHP分页类的代码
2011/05/18 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
学习ExtJS border布局
2009/10/08 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
在JavaScript中使用开平方根的sqrt()方法
2015/06/15 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
AngularJS实践之使用NgModelController进行数据绑定
2016/10/08 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
Python 解析XML文件
2009/04/15 Python
Python实现的监测服务器硬盘使用率脚本分享
2014/11/07 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
Python 自由定制表格的实现示例
2020/03/20 Python
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
班会关于环保演讲稿
2013/12/29 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
出国留学导师推荐信
2015/03/26 职场文书
防溺水主题班会教案
2015/08/12 职场文书
MySQL 重写查询语句的三种策略
2021/05/10 MySQL
Vue OpenLayer测距功能的实现
2022/04/20 Vue.js
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript