html如何实现点击文字弹出二维码图片

我做了一个HTML页，想在文字插入一个代码，实现点击 “文字”就会全屏谈出一个二维码图片，不知怎么实现，那位大神知道吗，告知下怎么编写这个代码。
比如这样：https://www.pandateacher.com/

阅读 23.4k

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        #main {
            margin-top: 50px;
            border: 1px solid black;
            cursor: pointer;
        }

        #qrcode img {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            display: block;
        }

        #qrcode {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.6);
            z-index: 9999;
            display: none;
        }
    </style>

    <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
</head>
<body>
    <button id="main">你是想要这种效果吗？？？</button>
    
    <div id="qrcode">
        <img id="image" width="100%" height="100%" src="https://jkooll.github.io/src/images/wechat_qrcode.jpg">
    </div>

    <script>
        $(function() {
            $("#main").click(function() {
                $("#qrcode").fadeIn("slow");
            });

            $("#qrcode").click(function() {
                $("#qrcode").fadeOut("slow");
            })
            
        });
    </script>
</body>
</html>

参考

jquery fadeIn http://api.jquery.com/fadeIn/
jquery fadeOut http://api.jquery.com/fadeOut/

多个qrcode

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .qrcode_button {
            margin-top: 50px;
            border: 1px solid black;
            cursor: pointer;
        }

        .qrcode {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.6);
            z-index: 9999;
            display: none;
        }

        .qrcode img {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 100px;
            display: block;
        }
    </style>

    <script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
</head>
<body>
    <button class="qrcode_button" value="#qrcode1">qrcode 1</button>

    <button class="qrcode_button" value="#qrcode2">qrcode 2</button>

    <button class="qrcode_button" value="#qrcode3">qrcode 2</button>
    
    <div class="qrcode" id="qrcode1">
        <img id="image" width="100%" height="100%" src="https://jkooll.github.io/src/images/wechat_qrcode.jpg">
    </div>

    <div class="qrcode" id="qrcode2">
        <img id="image" width="100%" height="100%" src="https://jkooll.github.io/src/images/wechat_qrcode.jpg">
    </div>

    <div class="qrcode" id="qrcode3">
        <img id="image" width="100%" height="100%" src="https://jkooll.github.io/src/images/wechat_qrcode.jpg">
    </div>

    <script>
        $(function() {
            $(".qrcode_button").click(function() {
                $($(this).val()).fadeIn("slow");
            });

            $(".qrcode").click(function() {
                $('#' + $(this)[0].id).fadeOut("slow");
            })
            
        });
    </script>
</body>
</html>

html如何实现点击文字弹出二维码图片

参考

你尚未登录，登录后可以

如何自定义设置虚线边框的样式？

怎么把一个矩形div变成一个直角三角形？

怎么去掉聚焦文字处的光标竖线？

Web 上的室内导航效果是如何实现的呢？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

浏览器可以直接解析scss文件了吗？

Flask中static文件夹下的本地图片无法在HTML页面加载怎么办？