一个有趣的遮罩问题

wuzuyu365

于 2019-12-03 13:43:32 发布

阅读量186

点赞数

分类专栏： js html

本文链接：https://blog.csdn.net/wuzuyu365/article/details/103365744

版权

js 同时被 2 个专栏收录

89 篇文章 1 订阅

订阅专栏

html

82 篇文章 1 订阅

订阅专栏

这个遮罩问题是这样的：

一个div里面还有个div ，要点击里面的div时，放大显示，并在其后显示一个遮罩，把其他的都遮住。

其中外面的div是fixed的，这个就比较难搞了，里面的div指定一个更高的z-index没用。

一遮罩，就把2个div都遮住了。

经过研究，终于解决了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    html, body {
        margin: 0;
        padding: 0;
    }

    #div_con {
        width: 300px;
        height: 300px;

        padding: 10px;
        text-align: center;

        border: 1px solid red;
        background: #faa;
        z-index: 100;
        position: fixed;
        left: 100px;
        top: 100px;
    }

    #div_box {
        width: 100px;
        height: 100px;
        border: 1px solid green;
        background: #bfb;
    }

</style>

<div id='div_con'>
    <div id='div_box' onclick='max_me()'>
        点我呀
    </div>
</div>

<script src='http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js'></script>

<script>
    //初始化遮罩层
    function initMyMask() {
        $("<div id='div_my_mask'></div>").css({
            position: 'absolute',
            top: 0,
            left: 0,
            backgroundColor: "#444",
            opacity: 0.8,
            zIndex: 300
        })
            .height($(document).height())
            .width($(document).width()).hide().appendTo("body");

        $('#div_my_mask').click(function () {
            $(this).hide();
            $('#div_box').css({position: 'inherit', width: 100, height: 100});

        });
    }

    initMyMask();

    function max_me() {
        console.log(max_me);
        let t_left = $('#div_con').offset().left;
        let t_top  = $('#div_con').offset().left;

        $('#div_con').css({position: 'inherit', marginLeft: t_left, marginTop: t_top});
        $('#div_box').css({position: 'absolute', left: 500, top: 200, width: 500, height: 300});
        $('#div_box').css('zIndex', 1000);
        $("#div_my_mask").show();
    }

</script>


</html>

另外，对于不方便遮住的情况，可以分成几块来遮住

wuzuyu365

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一个有趣的遮罩问题

这个遮罩问题是这样的：一个div里面还有个div ，要点击里面的div时，放大显示，并在其后显示一个遮罩，把其他的都遮住。其中外面的div是fixed的，这个就比较难搞了，里面的div指定一个更高的z-index没用。一遮罩，就把2个div都遮住了。经过研究，终于解决了：<!DOCTYPE html><html lang="en"...
复制链接

扫一扫

专栏目录