使用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>
Javascript 相关文章推荐
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
如何防止JavaScript自动插入分号
Nov 05 Javascript
AngularJS表单基本操作
Jan 09 Javascript
微信小程序中做用户登录与登录态维护的实现详解
May 17 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
AJAX实现指定部分页面刷新效果
Oct 16 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
You might like
用PHP和ACCESS写聊天室(二)
2006/10/09 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
react中实现搜索结果中关键词高亮显示
2018/07/31 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
js实现弹窗效果
2020/08/09 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
Python函数返回值实例分析
2015/06/08 Python
Python使用微信SDK实现的微信支付功能示例
2017/06/30 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
pycharm激活码2020最新分享适用pycharm2020最新版亲测可用
2020/11/22 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
linux面试题参考答案(7)
2014/07/24 面试题
十岁生日家长答谢词
2014/01/17 职场文书
航海技术专业毕业生推荐信
2014/07/09 职场文书
房产证明范本
2015/06/19 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
Python使用openpyxl模块处理Excel文件
2022/06/05 Python