jquery实现Div遮罩

最新推荐文章于 2021-03-31 18:31:41 发布

原创最新推荐文章于 2021-03-31 18:31:41 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #firefox #chrome #filter #浏览器

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript和CSS创建简易遮罩层的方法，该方法适用于多种浏览器，包括IE、Firefox和Chrome等。通过简单的代码实现了遮罩层的位置定位、尺寸调整及透明度设置等功能。

（兼容IE、Firefox、Chrome等主流浏览器）

<body>

<Div id="DivLocker"></Div>

其他html元素....

<script language="text/javascript">
      $('#DivLocker').css({
        "position": "absolute",
        "margin-left": "1px",
        "margin-top": "1px",
        "background-color": "#000000",
        "height": function () { return $(document).height(); },
        "filter": "alpha(opacity=30)",
        "opacity": "0.3",
        "overflow": "hidden",
        "width": function () { return $(document).width(); },
        "z-index": "999"
    });
</script>

</body>

可以自动加载，也可以将其作为一个事件的触发函数。height和width可以自定义设置。效果还可以，用什么插件什么的都太复杂，这个很简单。