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

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

ただいまの
回答率

89.13%

HTMLで一度動作させると、それ以降反応しなくなってしまう

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,531

sasuke

score 12

閲覧ありがとうございます。

前提・実現したいこと

現在、ある箇所をクリックすると、モーダルウィンドウを表示するという動作のHTMLを下記URLを参考に触っています。
http://coolwebwindow.com/jquery-lab/archives/486

発生している問題・エラーメッセージ

下のコードにより、リンクをクリックし正常にモーダルウィンドウを表示して閉じることもできたのですが、1度表示/閉じるとタイトルにも書いてあるようにそれ以降再びリンクをクリックしても全く反応しなくなるというのが問題点で、解決したい内容です。
一体何が原因なのでしょうか..?もしわかる方いましたらご教示よろしくお願いします><

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function(){
    // 「.modal-open」をクリック
    $('.modal-open').click(function(){

         // スクロールバーの横幅を取得
        var scrollsize = $(window).width() - $('body').prop('clientWidth');

        // html、bodyを固定(overflow:hiddenにする)
        $('html, body').addClass('lock');

        // オーバーレイ用の要素を追加
        $('body').append('<div class="modal-overlay"></div>');

        // オーバーレイをフェードイン
        $('.modal-overlay').fadeIn('slow');

        // モーダルコンテンツのIDを取得
        var modal = '#' + $(this).attr('data-target');

         // モーダルコンテンツを囲む要素を追加
        $(modal).wrap("<div class='modal-wrap'></div>");

        // モーダルコンテンツを囲む要素を表示
        $('.modal-wrap').show();

        // モーダルコンテンツの表示位置を設定
        modalResize();

         // モーダルコンテンツフェードイン
        $(modal).fadeIn('slow');

        // モーダルコンテンツをクリックした時はフェードアウトしない
        $(modal).click(function(e){
            e.stopPropagation();
        });

        // 「.modal-overlay」あるいは「.modal-close」をクリック
        $('.modal-wrap, .modal-close').off().click(function(){
            // モーダルコンテンツとオーバーレイをフェードアウト
            $(modal).fadeOut('slow');
            $('.modal-overlay').fadeOut('slow',function(){
                // html、bodyの固定解除
                $('html, body').removeClass('lock');
                // オーバーレイを削除
                $('.modal-overlay').remove();
                // モーダルコンテンツを囲む要素を削除
                $(modal).unwrap("<div class='modal-wrap'></div>");
           });
        });

        // リサイズしたら表示位置を再取得
        $(window).on('resize', function(){
            modalResize();
        });

        // モーダルコンテンツの表示位置を設定する関数
        function modalResize(){
            // ウィンドウの横幅、高さを取得
            var w = $(window).width();
            var h = $(window).height();

            // モーダルコンテンツの横幅、高さを取得
            var mw = $(modal).outerWidth(true);
            var mh = $(modal).outerHeight(true);

            // モーダルコンテンツの表示位置を設定
            if ((mh > h) && (mw > w)) {
                $(modal).css({'left': 0 + 'px','top': 0 + 'px'});
            } else if ((mh > h) && (mw < w)) {
                var x = (w - scrollsize - mw) / 2;
                $(modal).css({'left': x + 'px','top': 0 + 'px'});
            } else if ((mh < h) && (mw > w)) {
                var y = (h - scrollsize - mh) / 2;
                $(modal).css({'left': 0 + 'px','top': y + 'px'});
            } else {
                var x = (w - mw) / 2;
                var y = (h - mh) / 2;
                $(modal).css({'left': x + 'px','top': y + 'px'});
            }
        }

    });
});
</script>

<style>
.lock {
    overflow:hidden;
}

.modal-content {
    position:relative;
    display:none;
    width:50%;
    max-height:50%;
    margin:30px;
    padding:10px 20px;
    border:2px solid #aaa;
    background:#fff;
    overflow:auto;
}

.modal-content p {
    margin:0;
    padding:0;
}

.modal-overlay {
    z-index:1;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:120%;
    background-color:rgba(0,0,0,0.75);
}

.modal-wrap {
    z-index:2;
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:auto;
}

.modal-open {
    color:#00f;
    text-decoration:underline;
}

.modal-open:hover {
    cursor:pointer;
    color:#f00;
}

.modal-close {
    color:#00f;
    text-decoration:underline;
}

.modal-close:hover {
    cursor:pointer;
    color:#f00;
}
</style>
</head>
<body>
<a data-target="con1" class="modal-open">リンク1</a>

<div id="con1" class="modal-content">
    <p><a href="./">リンク1の内容です。</a>モーダルウィンドウで表示したい文字列をここに書く。</p>
    <p><a class="modal-close">閉じる</a></p>
</div>
    <p><a class="modal-close">閉じる</a></p>
</div>
<p>
クリックしてみてください。ウィンドウより大きいモーダルウィンドウにはスクロールバーが出ていると思います。<br>
</p>
</body>
</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2016/12/14 14:22

    「下記URLを参考に触っています」の URL からデモ http://coolwebwindow.com/jquery-lab/wp-content/demo/modal-inner-scroll/ に飛んでそれを試すと「1度表示/閉じるとタイトルにも書いてあるようにそれ以降再びリンクをクリックしても全く反応しなくなる」と言うことはないのですが? 試したブラウザは IE9, Firefox 50.1.0, Chrome 49.0.2623.112 m です。何かの間違い?

    キャンセル

回答 2

checkベストアンサー

+5

jQueryのバージョン関係なく、下記の変更で動作しました。
モーダルのラッパーを明示的に指定する場合はセレクタを使用してください。

// 修正前
$(modal).unwrap("<div class='modal-wrap'></div>");

// 修正後
$(modal).unwrap();

// セレクタを明示的に指定する場合
$(modal).unwrap('.modal-wrap');

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/14 15:01

    ありがとうございます。
    ご教示してくださったように変更したら現バージョンでも正常に動作しました。

    キャンセル

  • 2016/12/14 15:05

    よかったです。セレクタを指定する方法も追記しました。

    キャンセル

+1

少し見たところ、JQuery 3.Xの系列だとunwrapメソッドの部分でエラーが出るみたいですね。

https://jsfiddle.net/mhxtzxxq/

上のリンク先でJQueryのバージョンを変えたところ、1.X,2.X系列では正常に動作しました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/14 14:32

    回答ありがとうございます!
    読み込むjqueryを下のように変えたら正常に動くようになりました。
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://github.com/padolsey-archive/jquery.fn/blob/master/cross-domain-ajax/jquery.xdomainajax.js"></script>

    教えていただいたサイトはバージョンを変えていろいろ試すことが出来る?のですか..?便利そうですね!使ってみようと思いました。ありがとうございます。

    キャンセル

  • 2016/12/14 14:38

    JQueryではたびたびこういう互換問題が発生しますね。バージョンを下げるのは正直あまりお勧めできることではありませんが、趣味で作っているサイト程度なら問題無いでしょう。(業務だと自分はお勧めしません。Remodalなどのライブラリで代用した方がよろしいかと)

    キャンセル

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

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