弹出分享遮罩层

最新推荐文章于 2022-04-26 15:41:50 发布

云处安

最新推荐文章于 2022-04-26 15:41:50 发布

阅读量276

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_36575358/article/details/103256959

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

效果：

在这里插入图片描述

代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script src="base.js"></script>
    <link rel="stylesheet" href="reset.css">
    <title>弹出层</title>
    <style>
        .sharemask{
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
            display: flex;
            position: fixed;
            align-items: flex-end;
            flex-direction: column;
            background: rgba(0,0,0,0.9);
        }
        .sharemask img:nth-child(2){
            margin-top: .5rem;
            margin-right: 1rem;
        }
        .sharemask img:nth-child(1){
            margin-right: .5rem;
        }
        .dev_share{
            margin-top: 5rem;
            margin-left: 1.75rem;
            box-shadow: 0px 0px 5px rgba(200,200,200,0.5);
            border-radius: .5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            width: 4.3rem;
            height: .7rem;
            color: #3297ff;
            font-size: .28rem;
            border: .02rem solid #3297ff;
        }
        .lockbody{  /*锁定屏幕不滚动*/
            position: fixed;
            overflow: hidden;
        }

    </style>
</head>
<body>

<a href="javascript:;" class="dev_share">设备分享</a>

<div class="sharemask" style="display: none">
    <img src="./share.png" width="250px;" alt="">
    <img src="./shareknow.png" width="180px" alt="">
</div>

<script>

    $(document).ready(function(){
        $('.dev_share').on('click',function(){
            $('.sharemask').show();
            $('body').addClass('lockbody')
        })
        $('.sharemask img:nth-child(2)').on('click',function(){
            $('.sharemask').hide();
            $('body').removeClass('lockbody')
        })
    })
</script>
</body>
</html>

素材

1.我知道了！

2.手指
小手指

云处安

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
弹出分享遮罩层

效果：代码：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sc...
复制链接

扫一扫