jqueryに関する質問です。
以下のコードを用いて表示されたモーダルウィンドウ1の上に重ねて別のモーダルウィンドウ2を表示させたいです。
以下のコードのIDとClass名だけを変更してモーダルウィンドウ2を作成しました。
しかし、モーダルウィンドウ2が表示されるとモーダルウィンドウ1が消えてしまいます。
「.modal-overlay」あるいは「.modal-close」をクリックというコメント付近のコードを削除すると、問題は解決しますが、当然モーダルを閉じることができなくなってしまいます。
どうすればこの問題を解決できるか教えてください。
jquery
1$(function() { 2 // 「#modal-open」をクリック 3 $('.modal-open').click(function() { 4 // オーバーレイ用の要素を追加 5 $('body').append('<div class="modal-overlay"></div>'); 6 // オーバーレイをフェードイン 7 $('.modal-overlay').fadeIn('slow'); 8 9 // モーダルコンテンツのIDを取得 10 var modal = '#' + $(this).attr('data-target'); 11 // モーダルコンテンツの表示位置を設定 12 modalResize(); 13 // モーダルコンテンツフェードイン 14 $(modal).fadeIn('slow'); 15 16 // 「.modal-overlay」あるいは「.modal-close」をクリック 17 $('.modal-overlay, #modal-close').off().click(function() { 18 // モーダルコンテンツとオーバーレイをフェードアウト 19 $(modal).fadeOut('slow'); 20 $('.modal-overlay').fadeOut('slow', function() { 21 // オーバーレイを削除 22 $('.modal-overlay').remove(); 23 }); 24 }); 25 26 // リサイズしたら表示位置を再取得 27 $(window).on('resize', function() { 28 modalResize(); 29 }); 30 31 // モーダルコンテンツの表示位置を設定する関数 32 function modalResize() { 33 // ウィンドウの横幅、高さを取得 34 var w = $(window).width(); 35 var h = $(window).height(); 36 37 // モーダルコンテンツの表示位置を取得 38 var x = (w - $(modal).outerWidth(true)) / 2; 39 var y = (h - $(modal).outerHeight(true)) / 2; 40 41 // モーダルコンテンツの表示位置を設定 42 $(modal).css({ 43 'left' : x + 'px', 44 'top' : y + 'px' 45 }); 46 } 47 48 }); 49});