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>

  • 相关阅读:
    gradle项目与maven项目互转
    GET和POST两种基本请求方法的区别
    gradle项目打war和jar包
    maven项目打war和jar
    winsw打包jar
    前端
    CentOS
    Vue
    Spring
    Vue
  • 原文地址:https://www.cnblogs.com/setname/p/10419191.html
Copyright © 2011-2022 走看看