閲覧ありがとうございます。
###前提・実現したいこと
現在、ある箇所をクリックすると、モーダルウィンドウを表示するという動作の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>
回答2件
あなたの回答
tips
プレビュー