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

摘要：CSS+JavaScript实现原理:创建一个满屏的div，使用绝对定位，这样的话它就可以脱离文档流，对其他的元素不会产生影响，并且将其设置...

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 id="zhezhao"></div> <div id="login"><button id="btclose">点击关闭</button></div> <div>查字典教程网欢迎您，<button id="bt">点击弹出遮罩</button></div> </body> </html>

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

纯JavaScript：

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

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

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

代码：

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

★ JavaScript中exec函数用法实例分析

★ JavaScript基于setTimeout实现计数的方法

★ JavaScript实现鼠标拖动效果的方法

★ JavaScript实现的MD5算法完整实例

★ javascript基于DOM实现权限选择实例分析