纯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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
javascript数组使用调用方法汇总
Dec 08 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
javascript中length属性的探索
Jul 31 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
vue-router 路由基础的详解
Oct 17 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
js实现div色块碰撞
Jan 16 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
javascript canvas封装动态时钟
Sep 30 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脚本
2006/11/26 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
2013/04/26 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
nodejs教程之入门
2014/11/21 NodeJs
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
noty ? jQuery通知插件全面解析
2016/05/18 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
Vue + Scss 动态切换主题颜色实现换肤的示例代码
2020/04/27 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Python判断两个对象相等的原理
2017/12/12 Python
用Python下载一个网页保存为本地的HTML文件实例
2018/05/21 Python
tensorboard实现同时显示训练曲线和测试曲线
2020/01/21 Python
查看keras的默认backend实现方式
2020/06/19 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
EJB发布WEB服务一般步骤
2012/10/31 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
市场营销毕业生自荐信
2013/11/23 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
百日安全活动总结
2014/05/04 职场文书
五一劳动节活动总结
2015/02/09 职场文书
语文教师求职信范文
2015/03/20 职场文书