使用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>

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/setname/p/10419191.html