質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 832

kuroishi

score 47

初めまして、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です。ここでの記述ですが、クリックしたものをある変数に代入し、その変数を白色フレーム内に貼るという仕組みを作ろうとするのですが、うまく画像が表示されません。
ですので、この点についての解決策を教えてください。よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        table {
            z-index: 0;
            text-align: center;
            width: 100%;
            margin: 300px auto 20px auto;
            position: absolute;
            border: 0;
        }

        td {
            text-align: center;
        }

        td img {
            width: 100%;
            max-width: 1000px;
        }

        .backcolor_brack {
            width: 20px;
            height: 1800px;
            background-color: #000;
            opacity: 0;
            z-index: 1;
            overflow: auto;
            position: absolute;
            top: 0;
        }

        .base_back {
            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;
        }

        .picture_append {
            width: 50%;
            height: auto;
            display: none;
            float: left;
        }

        .coment {
            width: 50%;
            height: auto;
            display: none;
            float: left;
        }
    </style>
</head>
<body>
<table id="S_HP">
    <tr>
        <td>
            <a>
                <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image" class="picture_click" alt="">
            </a>
            <br>
        </td>
    </tr>
</table>
<div id="backcolor_brack" class="backcolor_brack"></div><!--すこし薄めの黒色背景-->
<div id="base_back" class="base_back"><!--写真と説明の大枠-->
    <div id="picture_append" class="picture_append"></div><!--画像用大枠-->
    <div id="coment" class="coment">
        試験中
    </div><!--画像説明大枠-->
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    $(".picture_click").click(function () {
        var $copy = $(this).clone();

        $("#picture_append").append($copy);// $($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);
    });
</script>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/07 19:13

    なるほど・・・とても簡単なミスでした。
    ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る