纯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
投稿
猜你喜欢
- using System;using System.Collections.Generic;using System.Linq;using
- 如何制作一个搜索引擎链接程序?多收集几个网站的,然后我们引用它到自己的页面中。接下来,我们要创建页面用于搜索:<center>&
- 方法一:import osimport cv2 as cvimport numpy as np# 读取yuv420p的一帧文件,并转化为pn
- 格式: SELECT column FROM table_name START WITH column=value CONNECT BY P
- 用mysqlbinlog.exe查看二进制日志是否启用了日志mysql>show variables like 'log%
- 前言本文主要给大家介绍了关于Innodb中mysql快速删除2T的大表的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介
- 今天在测试一个pytorch代码的时候显示显存不足,但是这个网络框架明明很简单,用CPU跑起来都没有问题,GPU却一直提示out of me
- 前言:本篇文章基于卷积神经网络CNN,使用PyTorch实现MNIST数据集手写数字识别。一、PyTorch是什么?PyTorch 是一个
- 一、MySQL5.6安装后,不能正常启用压缩版MySQL,解压完后在:我的电脑->属性->高级->环境变量选择PATH,在
- 一、函数解释setdiff1d(ar1, ar2, assume_unique=False)1.功能:找到2个数组中集合元素的差异。2.返回
- 常用字段类型bit(0和1),datetime,int,varchar,nvarchar(可能含有中文用nvarchar) Varchar,
- !important;严格来说,!important;应该不能算作是一种hack技术,被应用了!important;的属性将在IE中无效,对
- 1、pd.cut()用于将数据值按照值本身进行分段并排序到 bins 中。参数包含:x, bins, right, include_lowe
- declare @str varchar(100) set @str='8f8el3l' declare @s varcha
- 1 捕捉一个异常捕捉一个异常 以用0作为除数会得到ZeroDivisionError异常为例,print(1/0)为例程序的持续执行,不因该
- 1. 准备工作下载源码包wget http://python.org/ftp/python/2.7.3/Python-2.7.3.tar.b
- 昨天在网上看到一个防采集软件,说采集只访问当前网页,不会访问网页的图片、JS等,今天突然想到,通过动态程序和Js访问分别记录访问者的IP,然
- 在上一篇关于绘画Sankey桑葚图的文章里,已经介绍过大致的过程,本文主要解决如何自定义/修改 所想要的颜色, 如下所示一个桑葚图:想要修改
- 内容摘要: ASP具备管理不同语言脚本程序的能力,能够自动调用合适的脚本引擎以解释脚本代码和执行内置函数。ASP开发环境提供了两种
- 好久没有更新博客了,今天看到论坛上有位朋友问起全屏布局,有点像vc的界面。来了兴趣,就写了一个。运用IE6的怪异模式,通过绝对定位来实现的。