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
投稿猜你喜欢
Python自动化脚本登录校园网所需工具：python编译环境(博主使用的pycharm作演示，其实在cmd也可以操作！)selenium自- 使用方式：new downUpData({url:"http://192.168.1.103:8080/test/data.jso
- 本文实例讲述了python使用多线程不断刷新网页的方法。分享给大家供大家参考。具体如下：这段代码可以开通过个线程不断刷新指定的页面，可用于刷
- 一、FBVFBV（function base views） 就是在视图里使用函数处理请求。二、CBVCBV（class base views
- 学习前言神经网络的应用还有许多，目标检测就是其中之一，目标检测中有一个很重要的概念便是IOU什么是IOUIOU是一种评价目标检测器的一种指标
- atan 和 atan2 都是反正切函数，返回的都是弧度对于两点形成的直线，两点分别是 point(x1,y1) 和 point(x2,y2
- python PIL 将数组值转成图片安装 PIL 包pip install pillow将二维数据转换成单通道图片from PIL imp
- 那什么时候会产生指令重排现象呢？两个阶段：1、编译期；2、运行期。编译期指令重排解释型语言是在运行期间执行编译+运行动作，所以运行效率较编译
- 介绍众所周知，计算机视觉在机器学习和人工智能领域获得了巨大的普及。图像识别技术允许计算机处理比人眼更多的信息，通常更快、更准确，或者只是在人
- 关于conda安装matplotlib报错最近在师姐机器上跑实验的时候，想利用matplotlib包来绘制损失曲线图，安装过程中碰到了一些小
- 暴力的重启服务方案一般服务器重启可以直接通过 kill 命令杀死进程，然后重新启动一个新的进程即可。但这种方法比较粗暴，有可能导致某些正在处
- 本文实例讲述了Python基于回溯法子集树模板解决取物搭配问题。分享给大家供大家参考，具体如下：问题有5件不同的上衣，3条不同的裤子，4顶不
- 本文实例为大家分享了python实现雨滴下落到地面效果的具体代码，供大家参考，具体内容如下本程序在Windows 64位操作系统下，安装的是
- <!DOCTYPE html> <html> <head> <meta charset="
- 由于并不清楚服务器具体地址，只有jupyter 连接的情况下，上传文件。方法一：用Linux命令直接用linux命令，在jupyter中只需
- 这篇文章主要介绍了django有外键关系的两张表如何相互查找,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需
- 初次安装完PyCharm后，新建项目时，遇到了No Python interpreter selected的问题。意思是说没有找到Pytho
- 一个封装好的链接Mysql数据库的工具类，可以方便的获取Connection对象关闭Statement、ResultSet、Statment
- 1.turtle库turtle库是Python语言中一个很流行的绘制图像的函数库，想象一个小乌龟，在一个横轴为x、纵轴为y的坐标系原点，(0
- Python爬虫、数据分析、网站开发等案例教程视频免费在线观看https://space.bilibili.com/523606542Sel
