Jquery的遮罩层定位

最新推荐文章于 2025-03-16 13:57:47 发布

最新推荐文章于 2025-03-16 13:57:47 发布 · 213 阅读

收录于

当前文章被以下社区和专栏收录：

最近做了一个遮罩层的东东，把定位小整理了一下

东东类似如下：

图1 图2

点击某个按钮，弹出层绿色的图，同时出现遮罩层。

1、遮罩层绝对定位，写在wrap的外面：

#draw{ width:100%; height:100%; position:absulute; top:0px; left:0px; background:rgba(0, 0, 0, 0.7); display:none;}
#imger{ position:absolute; top:100px; left:400px; display:none}

2、点击某个按钮，Jquery代码：

<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){
            $("#draw,#imger").fadeIn();
        });
    });
</script>

3、优化：

a、draw框的大小只能是屏幕大小，向下拉动长度不够，改变代码如下：