html选择区域高亮,css+js实现部分区域高亮可编辑遮罩层

想大家都做过遮罩层这种常见的功能，css或jquery实现，实现方式多样化，这里http://我介绍我在项目中实现的方式，全屏遮罩，部分区域可操作，非常实用。

效果如下图：

js 实现部分：

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";

}

页面代码：

启动遮罩层

这是高亮显示区域

用户名

密　码

我是第三列

html选择区域高亮,css+js实现部分区域高亮可编辑遮罩层相关推荐

CSS+js弹出居中的背景半透明div层
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
w3c h5 + css + js笔记
公司电脑:/Users/yangyangzi/Desktop/YangZi2/2019前端/h5+css+js 「 1. js基础/css基础/html基础 w3school https://www. ...
前端基础知识面经大全（含html/css/js/es6/计算机基础）
目录参考: https://blog.csdn.net/henucm/article/details/105755073 一.HTML 1.对HTML语义化的理解 2.src和href的区别 3.D ...
HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考. 目录: 一.HTML编码规范二.CSS编码规范三.JS编码规范一.HTML编码规范 1. img标签要写alt属性根据W3C标准,i ...
前端小白入门必学：HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考. 一.HTML编码规范 1. img标签要写alt属性根据W3C标准,img标签要写alt属性,如果没有就写一个空的.但是一般要写一个有内容 ...
html css js书写规范
无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添 ...
html+css+js实现网页拼图游戏
代码地址如下: http://www.demodashi.com/demo/14449.html 项目描述使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效 ...
上传身份证照片js_html+css+js 实现拍照预览上传图片功能
前言:我们在做网页时经常会需要有上传图片的需求,可能是选择图片或者拍照上传,如果简单的使用这种方式虽然也能实现功能,但用户体验上可能会差了一些,所以本文记录了使用css+js实现图片选中后的预览及压缩 ...
html 全屏显示某个区域,JS实现指定区域的全屏显示功能示例
本文实例讲述了JS实现指定区域的全屏显示功能.分享给大家供大家参考,具体如下: www.jb51.net js指定区域全屏 #fulldiv { background: #fff; width: 10 ...
HTML+CSS+JS实现网页随机点名
HTML+CSS+JS实现网页随机点名大家好,我是小王,一个很喜欢Coding的小女孩. 很喜欢这句话:人数没有白走的路,每一步都算数,关注我,后期分享更多资源! 效果如下: 部分代码如下: < ...

html选择区域高亮,css+js实现部分区域高亮可编辑遮罩层

html选择区域高亮,css+js实现部分区域高亮可编辑遮罩层相关推荐

最新文章

热门文章