遮罩层显示二维码（绝对居中）.rar资源-CSDN下载

共3个文件

html：2个

jpg：1个

需积分: 50 191 浏览量 2020-01-02 16:15:38 上传评论收藏 18KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

遮罩层显示二维码（绝对居中）.rar （3个子文件）

遮罩层显示二维码（绝对居中）

qrcode.jpg 19KB

index-flex.html 2KB

index-transform.html 3KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>通过偏移，遮罩层二维码图片绝对居中</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> .hide{ display: none !important; } .overHidden{ height: 100%; overflow: hidden; } .qrcode-show{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.8; } .qrcode-show .qrcode-show-img{ display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; max-height: 100%; margin-bottom: 10px; } </style> </head> <body class="container"> <h3>通过transform偏移，遮罩层二维码图片绝对居中</h3> <button type="button" class="btn btn-default show-qrcode">显示遮罩层</button>  <section class="qrcode-show hide"> <img src="qrcode.jpg" alt="二维码" class="qrcode-show-img"> </section>  <script type="text/javascript"> $(function(){ // 显示二维码遮罩层 $(".show-qrcode").click(function(){ $(".qrcode-show").removeClass("hide"); // 禁止屏幕滚动 $("html,body").addClass("overHidden"); }); // 点击空白区域关闭遮罩层 /*$(".qrcode-show").click(function(e){ var _con = $('.qrcode-show-img'); // 设置目标区域[点击不会关闭遮罩层的区域] if(!_con.is(e.target) && _con.has(e.target).length === 0){ $(".qrcode-show").addClass("hide"); // 解除禁止滚动 $("html,body").removeClass("overHidden"); } });*/ // 点击空白区域关闭遮罩层，通过阻止冒泡事件实现 $(".qrcode-show").click(function(){ alert("点击空白区域"); $(".qrcode-show").addClass("hide"); // 解除禁止滚动 $("html,body").removeClass("overHidden"); }); $('.qrcode-show-img').click(function(){ alert("点击图片"); return false; }); }); </script> </body> </html>

评论收藏

内容反馈