使用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 相关文章推荐
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
May 17 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
Oct 30 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
Nuxt.js实战和配置详解
Aug 05 Javascript
简单使用webpack打包文件的实现
Oct 29 Javascript
解决vue项目运行npm run serve报错的问题
Oct 26 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 Javascript
JavaScript 与 TypeScript之间的联系
Nov 27 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
php+mysql实现无限级分类
2015/11/11 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
扩展String功能方法
2006/09/22 Javascript
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
基于JavaScript canvas绘制贝塞尔曲线
2018/12/25 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
JQuery样式与属性设置方法分析
2019/12/07 jQuery
如何在微信小程序中存setStorage
2019/12/13 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
python实现获取序列中最小的几个元素
2014/09/25 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
简单了解什么是神经网络
2017/12/23 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
Python是怎样处理json模块的
2020/07/16 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
Hotels.com越南:酒店预订
2019/10/29 全球购物
捐书倡议书
2014/08/29 职场文书
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android