纯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去除空格的几种方法
Oct 03 Javascript
如何用JavaScript定义一个类
Sep 12 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
微信小程序 textarea 组件详解及简单实例
Jan 10 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
小程序中设置缓存过期的实现方法
Jan 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
谈谈新手如何学习PHP
2006/12/14 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
newxtree.js代码
2007/03/13 Javascript
jquery创建div 实现代码
2009/04/27 Javascript
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
2019/06/04 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python协程用法实例分析
2015/06/04 Python
python中异常报错处理方法汇总
2016/11/20 Python
在Django中输出matplotlib生成的图片方法
2018/05/24 Python
django的ORM操作 增加和查询
2019/07/26 Python
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
干部培训自我鉴定
2014/01/22 职场文书
商场消防演习方案
2014/02/12 职场文书
岗位聘任书范文
2014/03/29 职场文书
政治思想表现评语
2014/05/04 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
2015年度企业工作总结
2015/05/21 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
讲解MySQL增删改操作
2022/05/06 MySQL
Java 多线程协作作业之信号同步
2022/05/11 Java/Android