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


Posted in Javascript onMarch 04, 2014

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

效果如下图:
css+js实现部分区域高亮可编辑遮罩层 
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>
Javascript 相关文章推荐
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
jquery.validate使用详解
Jun 02 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
Vue常用指令V-model用法
Mar 08 Javascript
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
Aug 26 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
关于RxJS Subject的学习笔记
Dec 05 Javascript
微信小程序图片自适应实现解析
Jan 21 Javascript
js 图片懒加载的实现
Oct 21 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 #Javascript
js判断url是否有效的两种方法
Mar 04 #Javascript
js 判断js函数、变量是否存在的简单示例代码
Mar 04 #Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 #Javascript
js判断页面中是否有指定控件的简单实例
Mar 04 #Javascript
js实现文本框中焦点在最后位置
Mar 04 #Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 #Javascript
You might like
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
PHP实现定时执行任务的方法
2014/10/05 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
CI框架的安全性分析
2016/05/18 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
Javascript绝句欣赏 一些经典的js代码
2012/02/22 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
JavaScript中window和document用法详解
2020/07/28 Javascript
原生js实现弹窗消息动画
2020/11/20 Javascript
python中的内置函数getattr()介绍及示例
2014/07/20 Python
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
python删除列表中重复记录的方法
2015/04/28 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
Python3爬虫学习之爬虫利器Beautiful Soup用法分析
2018/12/12 Python
python实现月食效果实例代码
2019/06/18 Python
浅谈Python 敏感词过滤的实现
2019/08/15 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
django rest framework serializer返回时间自动格式化方法
2020/03/31 Python
python 星号(*)的多种用途
2020/09/21 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
称象教学反思
2014/02/03 职场文书
自荐信的格式
2014/03/10 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers