Jquery实现简单遮罩层

来源：互联网发布：网络评论引导员编辑：程序博客网时间：2024/05/17 05:18

主要分为三个部分 css html js

1 .css 部分代码

    <style type="text/css">             .mask {                       position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;                     z-index: 1002; left: 0px;                     opacity:0.5; -moz-opacity:0.5;                 }         </style>

opacity:0.5;适用于IE， -moz-opacit:0.5;适用于火狐；解决兼容性问题

2 HTML 部分代码

    <div id="mask" class="mask"></div>        <a href="javascript:;" onclick="showMask()" >显示遮罩层</a><br />

3 js 代码部分

    <pre class="html" name="code"><script type="text/javascript">             //兼容火狐、IE8           //显示遮罩层            function showMask(){                 $("#mask").css("height",$(document).height());                 $("#mask").css("width",$(document).width());                 $("#mask").show();             }          //隐藏遮罩层          function hideMask(){                               $("#mask").hide();             }               </script>

0 0