Fork me on GitHub

超简约前端点击图片弹窗放大(手机端)

复制代码
.markImg{
            width:100%;
            height:100%;
            position:fixed;
            left:0;
            right:0;
            bottom:0;
            top:0;
            background:rgba(0,0,0,0.5);
            padding:15px;
            box-sizing:border-box;
            display:none;
        }
        .markImg img{
            width:100%;
            margin-top:40%;
        }


//图片
<img id="fileShow1Txt" src="" onclick="markFlags(this.src)">


//遮罩层
 <div class="markImg">
                <img id="fileShow1Txt2" src="" />
            </div>

//js点击事件
 function markFlags(img) {
            $('.markImg').fadeIn()
              $('.markImg img').attr('src', img)
        }
        $('.markImg').click(function () {
            $('.markImg').fadeOut()
        })
复制代码

 

posted @   WantRemake  阅读(139)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示