zoukankan      html  css  js  c++  java
  • 遮罩 半透明

    <!--

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript" src="http://blog.colorbird.com/mootools_demo/script/mootools.js"></script>
    <script language="javascript">
    function show(){
     /*定义两个DIV  showbg是遮盖层  showdiv是弹出窗口*/
     var showbg = new Element("DIV");
     var showdiv = new Element("DIV");
     showbg.id = "showbg";
     /*定位*/
     showbg.injectAfter($('main'));
     showdiv.injectInside($(showbg));
     
     /*设定遮盖层属性 filter是IE识别的透明 moz是FF的透明*/
     /*设定层属性 filter是IE识别的透明 moz是FF的透明*/
     $('showbg').setStyles('background-color:#000;filter:alpha(opacity=40);-moz-opacity:0.4;position:absolute;top:0;left:0;z-index:1000');
     /****************这部分为修改**************************/
     var textindiv = "<a href=javascript:void(0) onclick=removeshow()>关闭</a>";
     showdiv.setHTML(textindiv); 
     /******************************************************/
     dosize();
     
     window.addEvents({
      'resize': function(){dosize();},
      'scroll': function(){dosize();}
     });
     
     function  dosize(){
       showdiv.setStyle('width','100px');
       showdiv.setStyle('background','#fff'); 
       showbg.style.width = window.getWidth() + "px";
       showbg.style.height = window.getScrollHeight() + "px";
       
       showbgsx = window.getWidth();   
       showbgsy = window.getHeight();
       
       showdivx = $(showdiv).getCoordinates().width;
       showdivy = $(showdiv).getCoordinates().height;
       showdivt = window.getScrollTop();
      
       showdivtop = Math.floor((showbgsy - showdivy) / 2)+showdivt;
       showdivleft = Math.floor((showbgsx - showdivx) / 2)-18;
       showdiv.setStyles('background-color:#fff;position:absolute;top:'+showdivtop+'px;left:'+showdivleft+'px;z-index:1001'); 
      }
      
     function removeshow(){
       $('showbg').remove();
     }
    }
    </script>
    </head>
    <body>
    <div id="" style="height:1000px">
     <a href="javascript:void(0);" onclick="show()">登陆</a>
       
    </div>
     <a href="javascript:void(0);" onclick="show()">登陆</a>
    </body>
    </html>

    -->

  • 相关阅读:
    学习《Spring 3.x 企业应用开发实战》Day-1
    java面试32问
    线程的同步和异步
    TCP和UDP的区别
    深入理解Spring系列之四:BeanDefinition装载前奏曲
    深入浅出JDK动态代理(一)
    和大牛之间的差距
    深入理解Spring系列之三:BeanFactory解析
    深入理解Spring系列之二:BeanDefinition解析
    深入理解Spring系列之一:开篇
  • 原文地址:https://www.cnblogs.com/y0umer/p/3839442.html
Copyright © 2011-2022 走看看