镂空弹框/引导页/

最新推荐文章于 2025-02-16 16:16:15 发布

越来越好。

最新推荐文章于 2025-02-16 16:16:15 发布

阅读量303

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.csdn.net/qq_38880700/article/details/115880414

前端专栏收录该内容

133 篇文章

订阅专栏

镂空弹框/引导页/

主要采用设置引导元素的阴影的方式实现。

将引导元素阴影放大，直至占满屏幕。 box-shadow: rgb(0 0 0 / 60%) 0 0 0 100vh；

将指引按钮通过定位放置到引导元素周围。 position:absolute；获取引导元素位置使用getBoundingClientRect()方法，返回x,y轴位置。
效果图

代码实现

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.0.1/weui.min.css">
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <title>引导页面</title>
    <style>
        *{
            box-sizing: border-box;
        }
        body,html{
            margin: 0px;
            padding: 0px;
            background-color: #ffffff;
        }
        .container{
            width: 100%;
            position: relative;
        }
        .header-block{
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: .625rem /* 10/16 */ .3125rem /* 5/16 */;
            letter-spacing: .0625rem /* 1/16 */;
            background-color: #3d91d4;
            align-items: center;
            color: #ffffff;
        }
        .header-block div:nth-child(1){
            visibility: hidden;
        }
        .header-block div:nth-child(3){
            font-size: 0.9rem;
        }
        .card{
            display: flex;
            height: 70px;
            flex-direction: revert;
            align-items: center;
            border-bottom: 1px dashed #3d91d4;
        }
        .card-l{
            flex: 17%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .card-l img{
            width: 3.125rem /* 50/16 */;
            height: 3.125rem /* 60/16 */;
        }
        .card-r{
            flex: 83%;
        }
        .cs-bt{
            margin-top: 1.25rem /* 20/16 */;
        }
        .cs-bt span,.remove-bt span{
            display: inline-block;
            background: #3d91d4;
            color: #ffffff;
            padding: 5px 10px;
            font-size: 0.9rem;
        }
        .weui-navbar__item{
            display: flex;
            justify-content: center;
            line-height: auto;
            padding: .625rem /* 10/16 */ .3125rem /* 5/16 */;
        }
        .style1{
            /* width: 3.125rem;
            height: 3.125rem; */
            box-shadow: rgb(0 0 0 / 60%) 0 0 0 100vh;
            z-index: 1000;
        }
        .mask{
            position: absolute;
            z-index: 1001;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="header-block">
            <div>返回</div>
            <div>测试引导页</div>
            <div>详情</div>
        </div>
 
        <div class="body-block">
            <div class="card">
                <div class="card-l" onclick="test()"><img class="ulogo" src="https://thirdwx.qlogo.cn/mmopen/vi_32/FNjwGfrvTJKnEkaLk2yic8ibGN5ia220jCl05oMS34y3qZaEE4H1ibeWkvnjjfT53WsczG3f9Vr2SSXQ9UwJhdN59A/132"></div>
                <div class="card-r">清风明月</div>
            </div>
 
            <div class="weui-search-bar" id="searchBar">
                <form class="weui-search-bar__form">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" class="weui-search-bar__input" placeholder="搜索" required="">
                        <a href="javascript:" class="weui-icon-clear"></a>
                    </div>
                    <label class="weui-search-bar__label">
                        <i class="weui-icon-search"></i>
                        <span>搜索</span>
                    </label>
                </form>
                <a href="javascript:" class="weui-search-bar__cancel-btn">取消</a>
            </div>
 
            <div class="weui-tab" id="tab">
                <div class="weui-navbar">
                    <div class="weui-navbar__item">反馈</div>
                    <div class="weui-navbar__item">表单</div>
                    <div class="weui-navbar__item">上传</div>
                    <div class="weui-navbar__item">其它</div>
                </div>
                <div class="weui-tab__panel">
                    <div class="weui-tab__content">反馈页</div>
                    <div class="weui-tab__content">表单页</div>
                    <div class="weui-tab__content">上传页</div>
                    <div class="weui-tab__content">其它页</div>
                </div>
            </div>
 
            <div class="cs-bt">
                <span onclick="addClass()">测试按钮</span>
            </div>
        </div>
    
 
        <div calss="footer-block">
            <div></div>
        </div>
 
        <div class="mask">
            <div class="remove-bt">
                <span onclick="removeClass()">引导页面</span>
            </div>
        </div>
    </div>
</body>
 
<script>
    $(".mask").hide();
    window.onload=()=>{
        weui.tab('#tab',{
            defaultIndex: 0,
            onChange: function(index){
                console.log(index);
            }
        });
        weui.searchBar('#searchBar'); 
    }
    function addClass(){
        $(".card-l img").addClass("style1");

        let sdom = document.querySelector('.ulogo');
        let positions = sdom.getBoundingClientRect();
        console.log(sdom,positions.x,positions.y);
        
        //按钮定位
        $(".mask").show();
        $(".mask").css({
            top:positions.y + sdom.height + 15 +"px", //图片位置+图片高度+自定义距离
            left:positions.x + 15 + "px"    //图片位置+自定义距离
        });
    }
    function removeClass(){
        $(".card-l img").removeClass("style1");
        $(".mask").hide();
    }
    function test(){
        alert("hello");
    }
</script>
</html>