HTML 点击图片放大

<!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>
    <script src="../files/js/jquery-3.3.1.min.js"></script>
    <style>
        .image_normal{
            width: 200px;
            height: 200px
        }
        .image_large{
            width: %;
            height: %;
            position: fixed;
            top: ;
            left: ;
            background-color: rgba(,,,.);
            z-index: ;
            display: none
        }
        .image_large{
            z-index: ;
        }
    </style>
</head>

<body>
    <!-- 图片放大 -->
    <div class=" ">
            <img src="../files/img/bcLogina.png" class="image_normal">
            <div   class="image_large"></div>
        </div>
    <script type="text/javascript">
        $(function () {
            $(".image_normal").click(function () {
                var large_image = '<img src= ' + $(this).attr("src") + '></img>';
                console.log(large_image)
                $('.image_large').html($(large_image).css({
                    display:"block",
                    height: '50%',
                    width: '50%',
                    position: "absolute",
                    left: "50%",
                    top: "50%",
                    transform: "translate(-50%,-50%)",
                }, ));
                $('.image_large').css( "display","block" );
            });
            $('.image_large').click(function(){
                $(this).css( "display","none" );
            })
        });
    </script>
</body>
</html>