纯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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
解javascript 混淆加密收藏
Jan 16 Javascript
jQuery 使用手册(五)
Sep 23 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 Javascript
element-ui表格合并span-method的实现方法
May 21 Javascript
javascript导出csv文件(excel)的方法示例
Aug 25 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
德生S2000电路分析
2021/03/02 无线电
PHP截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
基于Zend的Captcha机制的应用
2013/05/02 PHP
php实现XSS安全过滤的方法
2015/07/29 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
详解PHP PDO简单教程
2019/05/28 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
javascript 构建模块化开发过程解析
2019/09/11 Javascript
python多进程提取处理大量文本的关键词方法
2018/06/05 Python
Python返回数组/List长度的实例
2018/06/23 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
Python识别验证码的实现示例
2020/09/30 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
架构师岗位职责
2013/11/18 职场文书
实习评语
2013/12/16 职场文书
关于是否需要写商业计划书
2014/02/07 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
大学社团招新的通讯稿
2014/09/10 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android