zoukankan      html  css  js  c++  java
  • 使用jquery+css制作显示遮幕层

    <style type="text/css">
    /* 半透明的遮罩层 */

    #mask{display:none;position:absolute;left:0;top:0;z-index:18888;background-color:#000000;opacity:0.7;}

    #guide{display:none;position:absolute;left:76px;top:5px;z-index:19999;}
    #guide img{260px;height:180px;}
    </style>

    //css是重中之重

    <body onload="showMask()">

    <div id="mask" class="mask" onclick="hideMask()">
            <div id="guide">
                <img src="images/guide_invi.png">       
            </div>
        </div>

    <script type="text/javascript">
        //显示遮幕层
       function showMask(){     
            $("#mask").css("height",$(document).height());     
            $("#mask").css("width",$(document).width());     
            $("#mask").show();
            $("#guide").css("height",$(document).height());     
            $("#guide").css("width",$(document).width());     
            $("#guide").show();
           
        }
        
        //隐藏遮罩层  
        function hideMask(){     
              
            $("#mask").hide();     
        }  
    </script>

    </body>

  • 相关阅读:
    代码间距的由来和解决方法
    径向渐变
    倒计时原理
    javascript原型模式理解
    倒计时原理和折叠收缩
    highcharts注意事项
    jsp注释前台不可见
    启动Tomcat任何程序都报错
    面试题
    eclipse不自动弹出提示(alt+/快捷键失效)
  • 原文地址:https://www.cnblogs.com/setname/p/10419191.html
Copyright © 2011-2022 走看看