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

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

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

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

jQuery

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

Q&A

解決済

1回答

9183閲覧

モーダルウィンドウが複数生成されてしまいます。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2016/01/12 14:00

###前提・実現したいこと
リンクをクリックしてモーダルウィンドウを表示させる。
また、複数モーダルウィンドウを準備してギャラリー表示させる。

###発生している問題・エラーメッセージ
更新した最初の段階では、nextボタンやprevボタンをおすと現在表示しているモーダルウィンドウが
fadeoutして次のモーダルウィンドウが表示されるが、一旦モーダルウィンドウをcloseボタンで削除し、他のリンクをクリックして再度モーダルウィンドウを表示させた後、nextボタンやprevボタンを押すと、複数モーダルウィンドウが生成されてしまう。(2回目に他リンクをおすと2個、3回目に他リンクをおすと3個)

###ソースコード

lang

1<!--コンテンツ1--> 2<div class="type type01"> 3<div class="txt">recommend plan</div> 4<!--下のaタグをクリックするとモーダルウィンドウが表示されます--> 5<a class="typeLink modal-syncer" data-target="modal-content-01" href="#"></a> 6</div> 7<!--コンテンツ2--> 8<div class="type type02"> 9<div class="txt">recommend plan</div> 10<a class="typeLink modal-syncer" data-target="modal-content-02" href="#"></a> 11</div> 12<!--コンテンツ3--> 13<div class="type type03"> 14<div class="txt">recommend plan</div> 15<a class="typeLink modal-syncer" data-target="modal-content-03" href="#"></a> 16</div>

下記のhtmlはモーダルウィンドウ自体のソースコードです。最初はcssで非表示にしています。

html

1<section id="modal-content-01" class="modal-content"> 2<div class="wrap clearfix"> 3<!--内容が入っています。--> 4<!--下がモーダルウィンドウを閉じるボタンです--> 5<p><a class="button-link modal-close"><div><i class="icon-cancel-2"></i></div></a></p> 6<!--下がnextボタンとprevボタンです--> 7<p><a class="arrow-next modal-next"><div><i class="icon-right-open-2"></i></div></a></p> 8<p><a class="arrow-prev modal-prev"><div><i class="icon-left-open-2"></i></div></a></p> 9</div> 10</section> 11 12<section id="modal-content-02" class="modal-content"> 13<!--以下同じです。--> 14</section> 15 16<section id="modal-content-03" class="modal-content"> 17<!--以下同じです。--> 18</section>

javascript

1$(function(){ 2 //グローバル変数 3 var nowModalSyncer = null ; //現在開かれているモーダルコンテンツ 4 var index = null ; //モーダルコンテンツの数 5 var modalClassSyncer = "modal-syncer" ; //モーダルを開くリンクに付けるクラス名 6 //モーダルのリンクを取得する 7 var modals = document.getElementsByClassName( modalClassSyncer ) ; 8 //モーダルウィンドウを出現させるクリックイベント 9 for(var i=0,l=modals.length; l>i; i++){ 10 //全てのリンクにタッチイベントを設定する 11 modals[i].onclick = function(){ 12 index = $(modals).index(this); 13 this.blur() ; 14 var target = this.getAttribute( "data-target" ) ; 15 var offset = $(this).offset().top; 16 if( typeof( target )=="undefined" || !target || target==null ){ 17 return false ; 18 } 19 nowModalSyncer = document.getElementById( target ) ; 20 if( nowModalSyncer == null ){ 21 return false ; 22 } 23 //キーボード操作などにより、オーバーレイが多重起動するのを防止する 24 if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない 25 //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する 26 27 //オーバーレイを出現させる 28 $( "body" ).append( '<div id="modal-overlay"></div>' ) ; 29 $( "#modal-overlay" ).fadeIn( "fast" ) ; 30 31 //コンテンツをフェードインする 32 $( nowModalSyncer ).fadeIn( "slow" ) ; 33 34 $( "#modal-overlay,.modal-close" ).unbind().click( function() { 35 $( ".modal-content,#modal-overlay" ).fadeOut( "fast" , function() { 36 $( '#modal-overlay' ).remove() ; 37 } ) ; 38 //現在のコンテンツ情報を削除 39 nowModalSyncer = null ; 40 index = null ; 41 }); 42 43 //nextボタンを押したとき 44 $( ".modal-next" ).click( function() { 45 $( nowModalSyncer ).fadeOut("fast" , function() { 46 var bb = modals[index + 1]; 47 var aa = bb.getAttribute( "data-target" ) ; 48 nowModalSyncer = document.getElementById( aa ) ; 49 $( nowModalSyncer ).fadeIn( "fast" ) ; 50 index++; 51 }); 52 }); 53 54 //prevボタンを押したとき 55 $( ".modal-prev" ).click( function() { 56 $( nowModalSyncer ).fadeOut("fast" , function() { 57 var bb = modals[index - 1]; 58 var aa = bb.getAttribute( "data-target" ) ; 59 nowModalSyncer = document.getElementById( aa ) ; 60 $( nowModalSyncer ).fadeIn( "fast" ) ; 61 index--; 62 }); 63 }); 64 } 65} 66}

長文でわかりずらくすみませんが、よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

インデントがずれていますので、直しました。

javascript

1$(function(){ 2 //グローバル変数 3 var nowModalSyncer = null ; //現在開かれているモーダルコンテンツ 4 var index = null ; //モーダルコンテンツの数 5 var modalClassSyncer = "modal-syncer" ; //モーダルを開くリンクに付けるクラス名 6 //モーダルのリンクを取得する 7 var modals = document.getElementsByClassName( modalClassSyncer ) ; 8 //モーダルウィンドウを出現させるクリックイベント 9 for(var i=0,l=modals.length; l>i; i++){ 10 //全てのリンクにタッチイベントを設定する 11 modals[i].onclick = function(){ 12 index = $(modals).index(this); 13 this.blur() ; 14 var target = this.getAttribute( "data-target" ) ; 15 var offset = $(this).offset().top; 16 if( typeof( target )=="undefined" || !target || target==null ){ 17 return false ; 18 } 19 nowModalSyncer = document.getElementById( target ) ; 20 if( nowModalSyncer == null ){ 21 return false ; 22 } 23 //キーボード操作などにより、オーバーレイが多重起動するのを防止する 24 if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない 25 //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する 26 27 //オーバーレイを出現させる 28 $( "body" ).append( '<div id="modal-overlay"></div>' ) ; 29 $( "#modal-overlay" ).fadeIn( "fast" ) ; 30 31 //コンテンツをフェードインする 32 $( nowModalSyncer ).fadeIn( "slow" ) ; 33 34 $( "#modal-overlay,.modal-close" ).unbind().click( function() { 35 $( ".modal-content,#modal-overlay" ).fadeOut( "fast" , function() { 36 $( '#modal-overlay' ).remove() ; 37 } ) ; 38 //現在のコンテンツ情報を削除 39 nowModalSyncer = null ; 40 index = null ; 41 }); 42 43 //nextボタンを押したとき 44 $( ".modal-next" ).click( function() { 45 $( nowModalSyncer ).fadeOut("fast" , function() { 46 var bb = modals[index + 1]; 47 var aa = bb.getAttribute( "data-target" ) ; 48 nowModalSyncer = document.getElementById( aa ) ; 49 $( nowModalSyncer ).fadeIn( "fast" ) ; 50 index++; 51 }); 52 }); 53 54 //prevボタンを押したとき 55 $( ".modal-prev" ).click( function() { 56 $( nowModalSyncer ).fadeOut("fast" , function() { 57 var bb = modals[index - 1]; 58 var aa = bb.getAttribute( "data-target" ) ; 59 nowModalSyncer = document.getElementById( aa ) ; 60 $( nowModalSyncer ).fadeIn( "fast" ) ; 61 index--; 62 }); 63 }); 64 } 65 } 66}

こうして見直しますと、modals[i].onclickの中に$( ".modal-next" ).click(...が書かれていることが分かります。
と、いうことは、『再度モーダルウィンドウを表示させ』るたびに、『nextボタンやprevボタン』のイベントが追加されていきますから、『複数モーダルウィンドウが生成されてしまう 』ことになります。

解決方法としましては、『nextボタンやprevボタン』のイベント設定コード部分をイベントの外に出す、ということになるかと思います。
あと、インデントのずれはこのようにバグの温床になりますから、面倒でもきちんとやっておいた方がいいかと思います。

投稿2016/01/15 11:12

Lhankor_Mhy

総合スコア35865

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

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

退会済みユーザー

退会済みユーザー

2016/01/15 13:57

とても分かりやすく教えて頂きありがとうございました。 また、インデントのずれも指摘して頂きありがとうございます! 今後気をつけたいと思います。 とても勉強になりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問