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

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

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

3063閲覧

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

sasuke

総合スコア12

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/12/14 04:55

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

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

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

###該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<script src="js/jquery.js"></script> 7<script> 8$(function(){ 9 // 「.modal-open」をクリック 10 $('.modal-open').click(function(){ 11 12 // スクロールバーの横幅を取得 13 var scrollsize = $(window).width() - $('body').prop('clientWidth'); 14 15 // html、bodyを固定(overflow:hiddenにする) 16 $('html, body').addClass('lock'); 17 18 // オーバーレイ用の要素を追加 19 $('body').append('<div class="modal-overlay"></div>'); 20 21 // オーバーレイをフェードイン 22 $('.modal-overlay').fadeIn('slow'); 23 24 // モーダルコンテンツのIDを取得 25 var modal = '#' + $(this).attr('data-target'); 26 27 // モーダルコンテンツを囲む要素を追加 28 $(modal).wrap("<div class='modal-wrap'></div>"); 29 30 // モーダルコンテンツを囲む要素を表示 31 $('.modal-wrap').show(); 32 33 // モーダルコンテンツの表示位置を設定 34 modalResize(); 35 36 // モーダルコンテンツフェードイン 37 $(modal).fadeIn('slow'); 38 39 // モーダルコンテンツをクリックした時はフェードアウトしない 40 $(modal).click(function(e){ 41 e.stopPropagation(); 42 }); 43 44 // 「.modal-overlay」あるいは「.modal-close」をクリック 45 $('.modal-wrap, .modal-close').off().click(function(){ 46 // モーダルコンテンツとオーバーレイをフェードアウト 47 $(modal).fadeOut('slow'); 48 $('.modal-overlay').fadeOut('slow',function(){ 49 // html、bodyの固定解除 50 $('html, body').removeClass('lock'); 51 // オーバーレイを削除 52 $('.modal-overlay').remove(); 53 // モーダルコンテンツを囲む要素を削除 54 $(modal).unwrap("<div class='modal-wrap'></div>"); 55 }); 56 }); 57 58 // リサイズしたら表示位置を再取得 59 $(window).on('resize', function(){ 60 modalResize(); 61 }); 62 63 // モーダルコンテンツの表示位置を設定する関数 64 function modalResize(){ 65 // ウィンドウの横幅、高さを取得 66 var w = $(window).width(); 67 var h = $(window).height(); 68 69 // モーダルコンテンツの横幅、高さを取得 70 var mw = $(modal).outerWidth(true); 71 var mh = $(modal).outerHeight(true); 72 73 // モーダルコンテンツの表示位置を設定 74 if ((mh > h) && (mw > w)) { 75 $(modal).css({'left': 0 + 'px','top': 0 + 'px'}); 76 } else if ((mh > h) && (mw < w)) { 77 var x = (w - scrollsize - mw) / 2; 78 $(modal).css({'left': x + 'px','top': 0 + 'px'}); 79 } else if ((mh < h) && (mw > w)) { 80 var y = (h - scrollsize - mh) / 2; 81 $(modal).css({'left': 0 + 'px','top': y + 'px'}); 82 } else { 83 var x = (w - mw) / 2; 84 var y = (h - mh) / 2; 85 $(modal).css({'left': x + 'px','top': y + 'px'}); 86 } 87 } 88 89 }); 90}); 91</script> 92 93<style> 94.lock { 95 overflow:hidden; 96} 97 98.modal-content { 99 position:relative; 100 display:none; 101 width:50%; 102 max-height:50%; 103 margin:30px; 104 padding:10px 20px; 105 border:2px solid #aaa; 106 background:#fff; 107 overflow:auto; 108} 109 110.modal-content p { 111 margin:0; 112 padding:0; 113} 114 115.modal-overlay { 116 z-index:1; 117 display:none; 118 position:fixed; 119 top:0; 120 left:0; 121 width:100%; 122 height:120%; 123 background-color:rgba(0,0,0,0.75); 124} 125 126.modal-wrap { 127 z-index:2; 128 display:none; 129 position:fixed; 130 top:0; 131 left:0; 132 width:100%; 133 height:100%; 134 overflow:auto; 135} 136 137.modal-open { 138 color:#00f; 139 text-decoration:underline; 140} 141 142.modal-open:hover { 143 cursor:pointer; 144 color:#f00; 145} 146 147.modal-close { 148 color:#00f; 149 text-decoration:underline; 150} 151 152.modal-close:hover { 153 cursor:pointer; 154 color:#f00; 155} 156</style> 157</head> 158<body> 159<a data-target="con1" class="modal-open">リンク1</a> 160 161<div id="con1" class="modal-content"> 162 <p><a href="./">リンク1の内容です。</a>モーダルウィンドウで表示したい文字列をここに書く。</p> 163 <p><a class="modal-close">閉じる</a></p> 164</div> 165 <p><a class="modal-close">閉じる</a></p> 166</div> 167<p> 168クリックしてみてください。ウィンドウより大きいモーダルウィンドウにはスクロールバーが出ていると思います。<br> 169</p> 170</body> 171</html>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/12/14 05: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 です。何かの間違い?
guest

回答2

0

ベストアンサー

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

javascript

1// 修正前 2$(modal).unwrap("<div class='modal-wrap'></div>"); 3 4// 修正後 5$(modal).unwrap(); 6 7// セレクタを明示的に指定する場合 8$(modal).unwrap('.modal-wrap');

投稿2016/12/14 05:47

編集2016/12/14 06:04
yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sasuke

2016/12/14 06:01

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

2016/12/14 06:05

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

0

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

https://jsfiddle.net/mhxtzxxq/

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

投稿2016/12/14 05:25

hitsujimeeee

総合スコア486

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sasuke

2016/12/14 05: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> 教えていただいたサイトはバージョンを変えていろいろ試すことが出来る?のですか..?便利そうですね!使ってみようと思いました。ありがとうございます。
hitsujimeeee

2016/12/14 05:38

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問