jquery控制div层首次加载3秒关闭，内容居中显示

最新推荐文章于 2022-01-03 22:01:35 发布

code12313

最新推荐文章于 2022-01-03 22:01:35 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/code12313/article/details/118329842

版权

样式：
<style>
        .cover{
            position: fixed;
            top:0;
            right:0;
            bottom:0;
            left:0;
            background-color: rgba(0,0,0,0.2);
            z-index:9998;
        }
        .modal {
           left:50%;
            width:100%;
            height:1080px;
            margin-left:-50%;
            position: fixed;
			margin-top:0px;
            background-size: cover;
            /*padding-bottom: 145%;*/
            z-index: 9999;
			text-align:center
        }
        .close {
            float: right;
            /*在这里将x移动到右上角*/
            margin-right: 15px;
            margin-top: 10px;
            font-size: 16px;
            cursor:pointer;
        }
        .hide {
            display: none;
            /*表示不显示*/
        }
    </style>

<body>

    <div class="cover hide" ></div>
    <div class="modal hide">
        <%--<span class="close" id="close">×</span>--%>
        <img ID="img" src="" style="margin:auto;margin-top:0px;"/>
    </div>
</body>

      $(".modal").css({ height:$(window).height()+'px', width: $(window).width() + 'px'});
        $("#img").css({height:$(window).height()+'px', width: $(window).width() + 'px'})

        $(function () {
            
            var first = sessionStorage.getItem("first");  //首次加载

            //首次加载
            if (!first) {
                sessionStorage.setItem("first", "1");
                $(".modal").removeClass("hide")
                $(".cover").removeClass("hide")
                $("#close").click(function () {
                    $(".modal").addClass("hide")
                    $(".cover").addClass("hide")
                })
                //展示3秒
                setTimeout(function () {
                    $(".modal").addClass("hide")
                    $(".cover").addClass("hide")
                },3000)
           }
        })

code12313

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery控制div层首次加载3秒关闭，内容居中显示

样式：<style> .cover{ position: fixed; top:0; right:0; bottom:0; left:0; background-color: rgba(0,0,0,0.2); z-index:9998; } .modal { ...
复制链接

扫一扫