jQueryのclone()を使った画像ポップアップについて

初めまして、kuroishiと申します。
私は現在HP制作をやっているのですが、その製作段階でわからないことがあったため質問させていただきます。

javascript

$(".picture_click").click(function(){
		var copy = $(this).clone(true);
		$(copy).append("#picture_append");
		setTimeout(function(){
			$("#backcolor_brack").animate({
				opacity:0.8,
				zIndex:100000000000000000000000,
			},1000);
		},500);
		setTimeout(function(){
			$("#backcolor_brack").animate({
				width:'100%',
			},800);
		},1500);
		setTimeout(function(){
			$("#base_back").animate({
				opacity:1,
				zIndex:100000000000000000000001,
			},400);
		},2000);
		setTimeout(function(){
			$("#base_back").animate({
				width:'70%',
			},800);
		},2400);
		setTimeout(function(){
			$("#picture_append,#coment").fadeTo("800",1);
		},3200);
	});

HTML

       <!--常時表示部分-->
       <table border="0" style="z-index:0; text-align:center; width:100%; margin:300px auto 20px auto; position:absolute;" id="S_HP">
			<tr>
				<td style="text-align:center;">
					<a><img style="width:100%; max-width:1000px;" src="sample_picture/IMG_0460.JPG"  class="picture_click" alt=""></a><br />
				</td>
			</tr>
		</table>


        <div style="width:20px; height:1800px;; background-color:#000; opacity:0; z-index:1; overflow:auto; position:absolute; top:0;" id="backcolor_brack"></div><!--すこし薄めの黒色背景-->
        <div style="width:20px; height:50%; opacity:0; z-index:1; overflow:auto; background-color:#FFF; position:fixed; top:0; left:0; right:0; bottom:0; margin:auto;" id="base_back"><!--写真と説明の大枠-->
            <div id="picture_append" style="width:50%; height:auto; display:none; float:left;"></div><!--画像用大枠-->
            <div style="width:50%; height:auto;  display:none; float:left;" id="coment">試験中</div><!--画像説明大枠-->
        </div>

(コードが汚いことがご勘弁ください、すべて作れ次第、外部CSSファイルに記述する予定です。)
つまり、表示されている画像をクリックすると黒色背景が表示され、白色の大枠の中に半分画像が表示され半分をコメント記入できるように作りたいと考えています。
問題はjavascriptのコード中のjQueryです。ここでの記述ですが、クリックしたものをある変数に代入し、その変数を白色フレーム内に貼るという仕組みを作ろうとするのですが、うまく画像が表示されません。
ですので、この点についての解決策を教えてください。よろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

以下のようにするとどうでしょうか？また、clone関数の引数にtrueをセットしないほうが良いのではないかと思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        table {
8            z-index: 0;
9            text-align: center;
10            width: 100%;
11            margin: 300px auto 20px auto;
12            position: absolute;
13            border: 0;
14        }
15
16        td {
17            text-align: center;
18        }
19
20        td img {
21            width: 100%;
22            max-width: 1000px;
23        }
24
25        .backcolor_brack {
26            width: 20px;
27            height: 1800px;
28            background-color: #000;
29            opacity: 0;
30            z-index: 1;
31            overflow: auto;
32            position: absolute;
33            top: 0;
34        }
35
36        .base_back {
37            width: 20px;
38            height: 50%;
39            opacity: 0;
40            z-index: 1;
41            overflow: auto;
42            background-color: #FFF;
43            position: fixed;
44            top: 0;
45            left: 0;
46            right: 0;
47            bottom: 0;
48            margin: auto;
49        }
50
51        .picture_append {
52            width: 50%;
53            height: auto;
54            display: none;
55            float: left;
56        }
57
58        .coment {
59            width: 50%;
60            height: auto;
61            display: none;
62            float: left;
63        }
64    </style>
65</head>
66<body>
67<table id="S_HP">
68    <tr>
69        <td>
70            <a>
71                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image" class="picture_click" alt="">
72            </a>
73            <br>
74        </td>
75    </tr>
76</table>
77<div id="backcolor_brack" class="backcolor_brack"></div><!--すこし薄めの黒色背景-->
78<div id="base_back" class="base_back"><!--写真と説明の大枠-->
79    <div id="picture_append" class="picture_append"></div><!--画像用大枠-->
80    <div id="coment" class="coment">
81        試験中
82    </div><!--画像説明大枠-->
83</div>
84<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
85<script>
86    $(".picture_click").click(function () {
87        var $copy = $(this).clone();
88
89        $("#picture_append").append($copy);// $($copy).append("#picture_append")から変更。
90        setTimeout(function () {
91            $("#backcolor_brack").animate({
92                opacity: 0.8,
93                zIndex: 100000000000000000000000,
94            }, 1000);
95        }, 500);
96
97        setTimeout(function () {
98            $("#backcolor_brack").animate({
99                width: '100%',
100            }, 800);
101        }, 1500);
102
103        setTimeout(function () {
104            $("#base_back").animate({
105                opacity: 1,
106                zIndex: 100000000000000000000001,
107            }, 400);
108        }, 2000);
109
110        setTimeout(function () {
111            $("#base_back").animate({
112                width: '70%',
113            }, 800);
114        }, 2400);
115
116        setTimeout(function () {
117            $("#picture_append,#coment").fadeTo("800", 1);
118        }, 3200);
119    });
120</script>
121</body>
122</html>