使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享_javascript技巧

CSS+JavaScript
实现原理:
创建一个满屏的div，使用绝对定位，这样的话它就可以脱离文档流，对其他的元素不会产生影响，并且将其设置为半透明状态，当然这个透明度可以随便调的，同时创建一个login元素，它也使用绝对定位，并将其z-index属性值大于面屏的div，这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="http://www.jb51.net/" /> 

<title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-</title> 

<style type="text/css"> 

* 

{ 

 margin:0px; 

 padding:0px; 

} 

.zhezhao 

{ 

 width:100%; 

 height:100%; 

 background-color:#000; 

 filter:alpha(opacity=50); 

 -moz-opacity:0.5; 

 opacity:0.5; 

 position:absolute; 

 left:0px; 

 top:0px; 

 display:none; 

 z-index:1000; 

} 

.login 

{ 

 width:280px; 

 height:180px; 

 position:absolute; 

 top:200px; 

 left:50%; 

 background-color:#000; 

 margin-left:-140px; 

 display:none; 

 z-index:1500; 

} 

.content 

{ 

 margin-top:50px; 

 color:red; 

 line-height:200px; 

 height:200px; 

 text-align:center; 

} 

</style> 

<script type="text/javascript"> 

window.onload=function() 

{ 

 var zhezhao=document.getElementById("zhezhao"); 

 var login=document.getElementById("login"); 

 var bt=document.getElementById("bt"); 

 var btclose=document.getElementById("btclose"); 

 bt.onclick=function() 

 { 

 zhezhao.style.display="block"; 

 login.style.display="block"; 

 } 

 btclose.onclick=function() 

 { 

 zhezhao.style.display="none"; 

 login.style.display="none"; 

 } 

} 

</script> 

</head> 

<body> 

 <div class="zhezhao" id="zhezhao"></div> 

 <div class="login" id="login"><button id="btclose">点击关闭</button></div> 

 <div class="content">欢迎您，<button id="bt">点击弹出遮罩</button></div> 

</body> 

</html>

以上实现了基本的遮罩功能，当点击弹出遮罩，会弹出一个对象，当点击关闭，遮罩效果消失。

纯JavaScript：
实现效果：弹出一个窗口的时候，窗口后面的页面变暗，并且不能操作。

难点：因为div层是不能把select控件遮住的，所以要特殊处理，方法两种，一种是在弹出窗口下面加一层iframe来遮住select；第二种是所以要在弹出的时候，先把select控件隐藏，这里选择第二种方法。

实现原理：在页面上和弹出窗口中间加一个半透明的层，把页面的内容覆盖掉 。

代码：

<script language="javascript">
function Open()
{
 //隐藏select控件
 DispalySelect(0);
 //显示遮罩层
 document.getElementById("divPageMask").style.display="block";
 //处理遮罩层
 resizeMask();
 window.onResize = resizeMask;
 //显示弹出窗口
 document.getElementById("divOpenWin").style.display="block";
}
function Close()
{
 //显示select控件
 DispalySelect(1);
 //处理遮罩层
 divPageMask.style.width = "0px";
 divPageMask.style.height = "0px";
 divOpenWin.style.display = "none";
 window.onResize = null; 

 document.getElementById("divOpenWin").style.display="none";
}
//页面遮罩
function resizeMask()
{
 divPageMask.style.width = document.body.scrollWidth;
 divPageMask.style.height = document.body.scrollHeight;
 divOpenWin.style.left = ((document.body.offsetWidth - divOpenWin.offsetWidth) / 2);
 divOpenWin.style.top = ((document.body.offsetHeight - divOpenWin.offsetHeight) / 2);
}
function DispalySelect(val)
{ //显示和隐藏select控件
 var dispalyType;
 var arrdispalyType=["hidden","visible"];
 var arrObjSelect=document.getElementsByTagName("select");
 for (i=0;i<arrObjSelect.length;i++)
 {
 arrObjSelect[i].style.visibility=arrdispalyType[val];
 }
}
</script> 

<style type="text/css">
.body,td{font-size:12px}
#divPageMask{background-color:white; filter:alpha(opacity=50);left:0px;position:absolute;top:0px;}
#divOpenWin{background-color:#EEEEEE;position: absolute;left:0px;top:0px;display: none;z-index:50; width:300px;height:150px}
</style> 

<div id="divPageMask"></div>
<div id="divOpenWin"><center><a href="javascript:Close();">关闭</a></center></div>
<label></label>
<center>
 <table border="0" cellpadding="0" cellspacing="0" width="650">
 <tbody>
 <tr>
 <td colspan="2" align="center" height="90"><p><img src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/logo.gif height="60" width="250"></p>
 <p> </p>
 <p> </p></td>
 </tr>
 <tr>
 <td height="10" style="color:#666666;font-size:13px"> </td>
 </tr>
 </tbody>
 </table>
 <table bgcolor="#e1e1e1" border="0" cellpadding="0" cellspacing="1" height="85" width="650">
 <tbody>
 <tr>
 <td align="center" bgcolor="#f9f9f9"><table height=50 cellspacing=0 cellpadding=0 width=600 style="margin-top:20px">
 <FORM name="f" action="http://www.sopull.com/ShopList.asp">
 <tbody>
 <tr>
 <td class="searchbar_word">关键字：</td>
 <td width="241"><input type="text" name="k" size=30 /></td>
 <td align=middle width=101 class="searchbar_word">所在地：</td>
 <td align=middle width=97 id="cn"><script language="javascript" src="http://www.sopull.com/Inc/Js/ListCity.asp?CityName=北京市"></script></td>
 <td align=middle width=95><input name="s" type=submit value=" 搜 铺 "></td>
 </tr>
 </form>
 <tr>
 <td width="64" height="30"> </td>
 <td colspan="4" valign="middle" class="search_text">例如：餐厅；电器；超市
 </table></td>
 </tr>
 </tbody>
 </table>
</center>
<p align="center"> </p>
<p align="center"><a href="javascript:Open();">打开遮罩</a></p>
<p align="center"> </p>
<table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
 <tbody>
 <!-- <tr>
 <td align="center" background="Images/Index/line_2.gif" width="580"><img src="Images/Index/line_2.gif" height="9" width="9"></td>
 </tr>-->
 <tr>
 <td class="link" align="center" height="30"><a href="#" target=_blank><font color="#FF6600">免费提交店铺</font></a> |  <a class="toplink" href="#">店铺推广</a> |  <a class="toplink" href="#">关于搜铺</a> |  <a class=b href="#" target=_blank>业务合作</a>  |  <a class="toplink" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.sopull.com');return false;" href="http://www.sopull.com/#">设为首页</a> |  <a class="toplink" onClick="javascript:window.external.addFavorite('http://www.sopull.com/','搜铺网-中国最大店铺搜索引擎')" href="http://www.sopull.com/#">加入收藏</a> </td>
 </tr>
 <tr>
 <td align="center" height="30">2007 搜铺网     粤ICP备07006767号</td>
 </tr>
 </tbody>
</table>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索javascript
， css
， div
， 遮罩
， 遮罩层
半透明
css半透明遮罩层、css图片半透明遮罩层、css半透明遮罩层文字、css半透明遮罩层效果、android 半透明遮罩层，以便于您获取更多的相关知识。

时间： 2024-04-24 03:25:34

使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享_javascript技巧的相关文章

JavaScript编写页面半透明遮罩效果的简单示例_javascript技巧

半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生js实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生js有所帮助 <div > <h4><span>现在注册</span><span >关闭</span></h4> <p> <label> 用户名</label> <input type="text" class="myin

纯JS代码实现隔行变色鼠标移入高亮_javascript技巧

在前端开发中经常见到隔行变色鼠标移入高亮显示的效果,下面小编给大家分享基于js代码实现的隔行变色鼠标移入高亮效果,废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #table { width: 400px; bor

纯JS实现本地图片预览的方法_javascript技巧

本文实例讲述了纯JS实现本地图片预览的方法.分享给大家供大家参考.具体如下: 刚突然看到,网上已经有很多类似的代码,但没找到一个合适的.就拿自己以前写的写了一个.代码比较简洁,引用了一个我之前写的js.方法可以单独剥离出来使用,未测太多兼容.本机浏览器基本都支持(IE,FF,Chrome) index.html如下: <html> <head> <title>Test</title> <script type="text/javascript

纯js模拟div层弹性运动的方法_javascript技巧

本文实例讲述了纯js模拟div层弹性运动的方法.分享给大家供大家参考.具体如下: 特性: 1. 支持各项常数自定义 2. 理论支持所有元素,只需修改style.width,你懂得 3. 已知支持浏览器:chrome/firefox/IE7.8.9 <html> <head> <meta http-equiv=Content-Type content="text/html;charset=utf-8"> <script type="te

多种js图片预加载实现方式分享_javascript技巧

图片预加载有大体有几种方式  1.html标签或css加载图片 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验.一般最好在文档渲染完成以后再加载(使用window.onload等).  2.纯js实现预加载 空城计-Code记的Javascript实现图片的预加载的完整实现的预加载实例为 function preloadimages(arr){ var newimages=[], loadedimages=

JS实现的自定义右键菜单实例二则_javascript技巧

本文实例讲述了JS实现的自定义右键菜单.分享给大家供大家参考.具体如下: 示例1: 运行效果截图: 具体代码如下: <!DOCTYPE html> <html> <head> <title>JS实现自定义右键菜单</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src=&

js实现拉幕效果的广告代码_javascript技巧

本文实例讲述了js实现拉幕效果的广告代码.分享给大家供大家参考.具体如下: 这是一款拉幕效果的广告代码,广告图片像窗帘的幕布一样慢慢的被拉上去了,缩小至一定大小后定格,目前来说,在一些大型的门户网站中仍然可以见到这种效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-lm-style-adv-pic-style-codes/ 具体代码如下: <html> <head> <meta http-equiv="C

JS自定义选项卡函数及用法实例分析_javascript技巧

本文实例讲述了JS自定义选项卡函数及用法.分享给大家供大家参考.具体如下: 这里分享一个JS选项卡函数附带演示效果,选项卡函数参数调用说明: cmd:点击元素集合 con:显示容器集合 evt:触发事件 css:为当前点击元素的样式名称 index:为默认显示第几项的索引值 目前选项卡的样式还比较简洁和粗糙,想用的自己动动手美化一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-zdy-tab-cha-fun-style-codes/

JS平滑无缝滚动效果的实现代码_javascript技巧

本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1280px; height:200px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 {