编程 Javascript

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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JS获取当前日期时间并定时刷新示例

Mar 04 Javascript

vueJS简单的点击显示与隐藏的效果【实现代码】

May 03 Javascript

jquery实现图片切换代码

Oct 13 Javascript

js正则表达式验证密码强度【推荐】

Mar 03 Javascript

JavaScript实现随机数生成器（去重）

Oct 13 Javascript

浅谈Vuex@2.3.0 中的 state 支持函数申明

Nov 22 Javascript

JS异步函数队列功能实例分析

Nov 28 Javascript

vue 实现单选框设置默认选中值

Nov 07 Javascript

element表格翻页第2页从1开始编号(后端从0开始分页)

Dec 10 Javascript

jQuery实现简单评论功能

Aug 19 jQuery

JS实现鼠标移动拖尾

Dec 27 Javascript

浅谈react路由传参的几种方式

Mar 23 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