html遮罩层原理,纯js实现遮罩层效果原理分析
可以说这个功能,在我理解了前面的“贪吃蛇”之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理
1、实现原理
本片文章的 是实现原理如下:
* 实际上弹出层、遮罩层和原页面显示分别为三个不同的div
* 弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上;
* 遮罩层有通明效果
* 遮罩层没有实际意义,则无需在html部分就写上,当然写上同样可以实现
2、代码实现
html语言如下:
....
登录
javascript实现弹出层和遮罩层:
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";
}
这里用z-index来区分层级,opacity和filter:alpha(opacity=)透明度,document.createElement("div")和document.body.appendChild()这些都是在之前出现过,应用过的了,这样我们就能实现了,其实当原理明白了的那一刻,一切也就容易多了吧。
路漫漫而修远兮啊
html遮罩层原理,纯js实现遮罩层效果原理分析相关推荐
- html瀑布式原理,纯css3+html瀑布流效果
[css]代码库 CSS3瀑布流 /*大层*/ .container{width:80%;margin: 0 auto;} /*瀑布流层*/ .waterfall{ -moz-column-count ...
- 隔行变色java代码_纯js实现隔行变色效果
本文实例为大家分享了js实现隔行变色的具体代码,供大家参考,具体内容如下 function createTable(){ //创建表格 var table = document.createEleme ...
- 纯js实现选择色卡效果
写出html页面 2. 要明白制作色卡的关键是从255到0的递减,不管是r,g,b中的哪一个. 2.1首先我们获得用户所想制作的基本色卡颜色,这时候涉及一个用户得16进制颜色格式是否正确问题,我们用焦 ...
- css3 万花筒原理,纯CSS做的万花筒效果
CSS 语言: CSSSCSS 确定 body { background-color: #222; } .circle { top: 20px; width: 300px; height: 300px ...
- 怎么写遮罩层 css,css案例 - mask遮罩层的华丽写法
mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; le ...
- html背景边框特效代码,纯JS实现动态边框特效
HtmlCssJs ^-^正常的边框 ^-^更慢的边框 ^-^更快的边框 ^-^图片边框 ^-^更细的边框 附赠的圆形 body { flex-wrap:wrap; flex:1 } .flex { ...
- js实现title滚动效果
js实现title滚动效果 原理:取第一个字符,放到尾部,定时循环操作,在视觉就有滚动效果了.直接上代码了 方式一 var titleText = "您有新订单,请及时处理!".s ...
- html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法 给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性 样式中需要对IE6.7及其它浏览器用hack辨别, ...
- 开发工具与关键技术:DW软件 JS设置遮罩层
开发工具与关键技术: DW软件 JS设置遮罩层 作者:冉启东 撰写时间:2019年1月18日 1.JS设置遮罩层代码如下: window.onload = function(){ var plan_t ...
最新文章
- 在python IDLE里执行py文件
- JMS和AWS SQS的更多高级内容
- jenkins java常用插件下载,Jenkins简单介绍以及插件入门
- 相对于通过木马传播方式获得的C++用户数据
- css中选择器的使用
- 修改密码-测试用例设计
- oracle下拉菜单多选,多选下拉控件的使用(select-option)multiple-select
- 【优化求解】基于布谷鸟算法CS实现多目标求解matlab代码
- db2 创建实例,创建数据库,创建表
- 将py文件打包成可exe文件
- 论文阅读一《Region Proposal by Guided Anchoring》
- pil库修改图片大小_使用PIL改变图像格式及尺寸
- Excel常用工具---在线版V1.5使用说明
- Excel超实用办公技巧,迅速提高办公效率
- macOS 使用 X11 运行远端 linux 中的 x11 client 图形程序
- 2022-2028全球药品泡罩包装机行业调研及趋势分析报告
- 关于代码审查的一些探讨和总结
- Android实用技巧之adb命令:am 命令的使用
- speex与webrtc回声消除小结
- 【陈工笔记】# Latex中,bib格式转换为bbl格式文件 #
热门文章
- linux unzip 多个文件,linux unzip 分卷
- 邮政社招笔试题库_中国邮政招聘考试笔试都考什么内容和题型?最好具体一点...
- java怎么设置cookie_java怎么设置cookie java设置cookie方法流程
- 文件服务器怎么和域同步ldap,ad域和ldap服务器搭建
- Java字符串格式化—String.format()的使用以及Printf的使用
- 图像缩放之最近领域插值法
- 后端开发常用官方中文文档整理
- mysql数学函数名_MySQL数学函数 - flood的个人空间 - OSCHINA - 中文开源技术交流社区...
- python怎么后撤步_nba2kol后撤步跳投 后撤步跳投按键技巧
- 安装固态硬盘,小米笔记本13.3