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

想大家都做过遮罩层这种常见的功能,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>

时间: 2014-03-02

纯js实现遮罩层效果原理分析

可以说这个功能,在我理解了前面的"贪吃蛇"之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理 1.实现原理 本片文章的 是实现原理如下: * 实际上弹出层.遮罩层和原页面显示分别为三个不同的div * 弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上: * 遮罩层有通明效果 * 遮罩层没有实际意义,则无需在html部分就写上,当然写上同样可以实现 2.代码实现 html语言如下: 复制代码 代码如下: <html>

js点击按钮实现带遮罩层的弹出视频效果

本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下 最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层 点击黄色区域可以关闭视频 并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置有id值. <div class="main"> <a href="javascript:;" class="video" id="

弹出最简单的模式化遮罩层的js代码

假设我们有一个容器container如下: 复制代码 代码如下: <style type="text/css"> #container{width:auto;height:auto; overflow:hidden;} /*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本浏览器兼容性问题*/ </style> <div id="container&quo

JS简单实现点击按钮或文字显示遮罩层的方法

本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>点击文字弹出一个DIV层窗口代码</title> <meta charset="urf-8"/> &l

js实现遮罩层弹出框的方法

本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码 代码如下: <style>     #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f

js弹出div并显示遮罩层

复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy

通过遮罩层实现浮层DIV登录的js代码

这个就没什么好说的了..直接上代码啊!! 首先是HTML的代码.其中包含了登录点击按钮以及一个简陋的登录框. 复制代码 代码如下: <body> <div id="shade"></div> <div> <a onclick="login()" style="cursor:pointer">登录</a> </div> <br/> 什么都没有用...&l

javascript div 遮罩层封锁整个页面

具体解决方案如下: 一.IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别. clientHeight 在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度. offsetHeight 在IE下,offsetHeight也是浏览器可视区域的高(包括边线) 在FF下,offsetHeight是页面具体内容的高度 scrollHeight 在IE下,scroll

js鼠标悬浮出现遮罩层的方法

本文实例讲述了js鼠标悬浮出现遮罩层的方法.分享给大家供大家参考.具体实现方法如下: html页面代码: 复制代码 代码如下: <ul class="site-tag fl">          <li><a data-title="科学" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa60002008

JS实现遮罩层效果的简单实例

复制代码 代码如下: function show(){ var cover = document.getElementById("cover"); cover.style.width = document.documentElement.scrollWidth+"px"; cover.style.height = document.documentElement.scrollHeight+"px"; cover.style.display = &

JS遮罩层效果 兼容ie firefox jQuery遮罩层

复制代码 代码如下: <!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=&qu

原生js实现半透明遮罩层效果具体代码

复制代码 代码如下: <!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=&qu

原生js实现弹出层效果

知识要点 1.遮罩层的宽度和高度是js获取页面的宽高(页面内容) //获取遮罩层(内容)的高度和宽度 var sHeight=document.documentElement.scrollHeight; var sWidth=document.documentElement.scrollWidth; 2.登录框设置静止定位fixed 3.登录框居中显示公式:(可视区域宽高-登录框宽高)/2 //获取login的宽度和高度并设置偏移值 var dHeight=oLogin.offsetHeight

JavaScript编写点击查看大图的页面半透明遮罩层效果实例

这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章.下次再有人问就直接把这篇文章的URL丢出去就好了.这个效果很简单所以我就不做太多说明了,具体的看看代码注释就会明白.下面就是全部代码,复制到HTML中就可以运行的. <!DOCTYPE html> <style> #mask { position:fixed;width:100%; top:0px;left:0px; _position:absolute; _top:expression(documentElemen

js+html5实现半透明遮罩层弹框效果

点击按钮,出现半透明遮罩层弹框,说说自己之前发过的愁吧 1.遮罩层半透明了 弹框也跟着半透明了 就像这样 绝望吧 是哪里错了呢?你的css是这样写的吧: 应该这样: 需要注意的是这几个参数的意思:RGB Red Green Bule 3色!及212, 0, 0 三色的值混合 .最后一个参数 0.5 是指的透明度 1表示不透明 2.半遮罩层里面的内容可以上下滑动 感觉挺好玩的 /笑哭 修改就是把半遮罩层的position设置为fixed 里面的内容就不会变啦 接下来就是代码show <!docty

弹出窗口并且此窗口带有半透明的遮罩层效果

本章节介绍一下如何点击一个按钮实现弹出一个居中窗口,并且此窗口带有半透明的遮罩层效果,此效果在当下比较流行,当然还有更为复杂的实现方式,当然效果也更为绚丽,下面介绍的代码能够简单实现此小姑. 代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://

jQuery弹出遮罩层效果完整示例

本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: <!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&

jQuery遮罩层效果实例分析

本文实例分析了jQuery遮罩层效果.分享给大家供大家参考,具体如下: 先来看看示例代码: <!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" xml:l

jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

本文实例讲述了jQuery实现带遮罩层效果的blockUI弹出层.分享给大家供大家参考,具体如下: 首先先附上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml: