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

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

阅读 23.9k

<!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如何实现点击文字弹出二维码图片

参考

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？