纯js实现遮罩层效果原理分析
发布时间：2024-02-24 01:32:14
标签：纯js,遮罩层
可以说这个功能，在我理解了前面的“贪吃蛇”之后，实在是与刚开始想象的难度差了好多，当然是这种方式有取巧之嫌，终归是实现了功能，我们来进行分析整理
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()这些都是在之前出现过，应用过的了，这样我们就能实现了，其实当原理明白了的那一刻，一切也就容易多了吧。
路漫漫而修远兮啊
0
投稿猜你喜欢
- 前言最近，我已经成功将我的个人网站从 Flask 迁移到 Django 了，最早接触 Django 的时候大概是在 4 年前，我记得那个时候
- 一、基本使用①从属于time这个包②一般使用都是使用time.Time 这个类型表示时间 ，time包中还有一些常量，源码如下// Comm
- Inside君整理了一份最新基于MySQL 5.6和5.7的配置文件模板，基本上可以说覆盖90％的调优选项，用户只需根据自己的服务器配置稍作
万众瞩目的 Firefox 3 从昨天开始可以下载了，用“铺天盖地”四个字来形容她的宣传一点都不为过。大多数的广告还是她的fans自发进行的- 前言只统计像素的灰度值这一特征，可将其成为一维直方图。二维直方图可以统计像素的色相和饱和度，用于查找图像的颜色直方图。一、OpenCV中的二
- 一、需求说明能够根据模板批量生成docx文档。具体而言，读取excel中的数据，然后使用python批量生成docx文档。二、实验准备准备e
- 创作背景最近本人在 PyCharm 的虚拟环境安装第三方库的时候报了错，说 no such option: --bulid-dir ，如下图
- Python----OS 文件目录处理import osimport time# 获取当前文件的绝对路径dir_1 = os.path.ab
- 那天突然的一个灵感，是针对防盗链的。正常上传的文件，若被人盗链则增加了自己服务器的负担，上次164.cc就因此被挂。然后想想对策，目前各类防
- sql server 锁定模式有三种：共享（ S锁），更新（U锁），排他（X锁）；S锁是共享锁，如果事务T对数据A加上共享锁后，则其他事务只
- 前面的python3入门系列基本上也对python入了门，从这章起就开始介绍下python的爬虫教程，拿出来给大家分享；爬虫说的简单，就是去
- 常量是程序中最基础的元素，在定义之后就不能再重新赋值了。Go语言中的常量类型有布尔常量、整数常量、浮点数常量、 字符常量、字符串常量和复数常
- 本文实例讲述了Python使用Flask-SQLAlchemy连接数据库操作。分享给大家供大家参考，具体如下：需要安装flaskpip in
- dim dr dr="2123123" dr1=Cint(dr) dr2=Clng(dr) 可参考如下函数说明： CIn
- 在MySQL数据库中导出整个数据库：1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名mysqldu
- PostgreSQL引进“分区”表特性，解放了之前采用“表继承”+“触发器”来实现分区表的繁琐、低效。而添加分区，都是手动执行SQL。演示目
- 这篇文章主要介绍了Python内置加密模块用法解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可
- function test(){ return 123; } 显然这是一个函数声明,那下面的呢 var b=f
- Oracle游标分为显示游标和隐式游标。显示游标（Explicit Cursor）:在PL/SQL程序中定义的、用于查询的游标称作显示游标。
- 百度语音对上传的语音要求目前必须是单声道，16K采样率，采样深度可以是16位或者8位的PCM编码。其他编码输出的语音识别不出来。语音的处理技
