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

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

       <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》    
  
点击关闭
  
脚本之家欢迎您，点击弹出遮罩
  

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

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

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

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

代码：

<script language="javascript"> function Open() {  //隐藏select控件  DispalySelect(0);  //显示遮罩层  document.getElementById("pPageMask").style.display="block";  //处理遮罩层  resizeMask();  window.onResize = resizeMask;  //显示弹出窗口  document.getElementById("pOpenWin").style.display="block"; } function Close() {  //显示select控件  DispalySelect(1);  //处理遮罩层  pPageMask.style.width = "0px";  pPageMask.style.height = "0px";  pOpenWin.style.display = "none";  window.onResize = null;   document.getElementById("pOpenWin").style.display="none"; } //页面遮罩 function resizeMask() {  pPageMask.style.width = document.body.scrollWidth;  pPageMask.style.height = document.body.scrollHeight;  pOpenWin.style.left = ((document.body.offsetWidth - pOpenWin.offsetWidth) / 2);  pOpenWin.style.top = ((document.body.offsetHeight - pOpenWin.offsetHeight) / 2); } function DispalySelect(val) { //显示和隐藏select控件  var dispalyType;  var arrdispalyType=["hidden","visible"];  var arrObjSelect=document.getElementsByTagName("select");  for (i=0;i
       ©2007 搜铺网     粤ICP备07006767号