css+js实现部分区域高亮可编辑遮罩层
发布时间:2024-02-25 08:49:23
标签:部分区域,高亮,遮罩层
想大家都做过遮罩层这种常见的功能,css或jquery实现,实现方式多样化,这里http://我介绍我在项目中实现的方式,全屏遮罩,部分区域可操作,非常实用。
效果如下图:
js 实现部分:
<script type="text/javascript">
var myAlert = document.getElementById("alert");
var reg = document.getElementById("content").getElementsByTagName("a")[0];
reg.onclick = function() {
myAlert.style.background = "#e2ecf5";
myAlert.style.zIndex = "501";
myAlert.style.position = "absolute";
var signSpan = document.getElementById("signSpanId");
myAlert.style.top = signSpan.offsetTop;
myAlert.style.left = signSpan.offsetLeft;
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>
页面代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<table border="1" align="center" width="700px">
<tr>
<td width="300px" height="200px" style="font-size:28px; font-weight:bold">
<div id="content">
<a href="#">
启动遮罩层
</a>
</div>
</td>
<td style="vertical-align:top">
<div id="signSpanId" style="position:absolute;"></div>
<div id="alert" align="top">
<h4>
<span>
这是高亮显示区域
</span>
</h4>
<p>
<label>
用户名
</label>
<input type="text" />
</p>
<p>
<label>
密码
</label>
<input type="password" />
</p>
<p>
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</p>
</div>
</td>
<td width="100px">
<div>我是第三列</div>
</td>
</tr>
</table>
</body>
</html>
0
投稿
猜你喜欢
- 如下所示: col = [] img = "test1" img1 = "test2" col.ap
- Pycharm作为一款强力的Python IDE,在使用过程中感觉一直找不到全面完整的参考手册,因此决定对官网的Pycharm教程进行简要翻
- ltp是哈工大出品的自然语言处理工具箱, pyltp是python下对ltp(c++)的封装.在linux下我们很容易的安装pyltp, 因
- 本文实例讲述了Python基于聚类算法实现密度聚类(DBSCAN)计算。分享给大家供大家参考,具体如下:算法思想基于密度的聚类算法从样本密度
- 注意:if语句代码是从上往下执行的,当执行到满足条件的语句时,代码会停止往下执行注意:if语句后面要加上冒号score = int (inp
- 前言在ORACLE数据库应用调优中,一个SQL的执行次数/频率也是常常需要关注的,因为某个SQL执行太频繁,要么是由于应用设计有缺陷,需要在
- 如图:Oracle 11g安装到42%挂了。上度娘查了一下,原来是Oracle安装包的问题,1,2两个包都要下载下来,而且需要解压到相同(同
- 在互联网出现之前,“抄”很不方便,一是“源”少,而是发布渠道少;而在互联网出现之后,“抄”变得很简单,铺天盖地的“源”源源不断,发布渠道也数
- python怎么模拟点击网页按钮前提环境: Python3 和 Visual Studio Code安装完毕安装selenium : 在终端
- 实例的背景说明假定一个个人信息系统,需要记录系统中各个人的故乡、居住地、以及到过的城市。数据库设计如下:Models.py 内容如下:&nb
- 本文实例为大家分享了python3实现多张图片附件邮件发送的具体代码,供大家参考,具体内容如下直接上代码,没有注释!from email.m
- OpenCV+python3将视频分解成图片,供大家参考,具体内容如下我们在工作或学习时,偶尔需要将视频分解成图片,只取其中一段的图片就行了
- 用过软件的朋友都知道,进度条是一个优秀软件的重要组成部分。它的存在能够使用户及时掌握程序的运行进度,确认应用程序正常工作。可是ASP中似乎没
- python中进行图表绘制的库主要有两个:matplotlib 和 pyecharts, 相比较而言:matplotlib中提供了BaseM
- 对win32 COM不是很熟悉,不知道一个程序究竟有多少属性或者方法可以操作。仅仅是一个Sheet页的添加就费了我好长时间,因为这种成功来自
- 1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where
- 1.问题描述请编写程序,实现以下功能:在字符串中的所有数字字符前加一个“$”符号。例如,输入A1B2
- 1. 概念图像融合: 两幅图片叠加在一起,形成前景背景的效果。2. 流程(1)读入要融合的两幅图片。(2)把两幅图片调整到统一大小,方便下一
- 导语无论家用电脑还是公司的电脑,定时开关机都是一个非常实用的功能,只是一般都不太受关注。定时关机不仅能延长电脑的使用寿命,还能节约超多的电费
- 有时候会需要通过从保存下来的ckpt文件来观察其保存下来的训练完成的变量值。ckpt文件名列表:(一般是三个文件)xxxxx.ckpt.da