首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMay 09, 2016

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

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="https://3water.com/" /> 

<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="http://www.sopull.com/Images/Index/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>

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

- Author -

hbxiao135

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

Javascript 相关文章推荐
Javascript入门学习资料收集整理篇
Jul 06 Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
jQuery实现表格行上下移动和置顶效果
Jun 05 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
Bootstrap模仿起筷首页效果
May 09 #Javascript
基于jquery实现智能表单验证操作
May 09 #Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 #Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 #Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 #Javascript
JavaScript 函数的执行过程
May 09 #Javascript
jQuery绑定事件-多种实现方式总结
May 09 #Javascript
RTMP(1) keeplive_timeout(1) BufferPool(1) location(2) http_stub_status_module(1) 缓存机制(1) 逻辑函数(1) text-shadow(1) zabbix(9) 复合索引(1)
You might like
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
jQuery的链式调用浅析
2010/12/03 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
深入理解js generator数据类型
2016/08/16 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
微信小程序实现导航栏选项卡效果
2020/06/19 Javascript
JavaScript门道之标准库
2018/05/26 Javascript
Vue2.0 实现移动端图片上传功能
2018/05/30 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
浅析python 中__name__ = '__main__' 的作用
2014/07/05 Python
Python中的延迟绑定原理详解
2019/10/11 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
parser.add_argument中的action使用
2020/04/20 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传
2016/01/20 HTML / CSS
学生发电厂实习自我鉴定
2013/09/22 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
村抢险救灾方案
2014/05/09 职场文书
企业挂职心得体会
2014/09/10 职场文书
中班下学期个人总结
2015/02/12 职场文书