Q&A
ご回答ありがとうございます。
モーダルを開いた状態でもう一つ開くのではなく、
Lightboxのように画像クリックで説明文→閉じた後で別の画像クリック→説明文…
のようにしたかったのですが、こういったことも出来ないのでしょうか？
###前提・実現したいこと
Lightboxのようにギャラリーページの画像をクリックでモーダルウインドウ（説明文）を表示したいです。
###発生している問題・エラーメッセージ
どうしてもIEでうまく表示されません。
http://coolwebwindow.com/jquery-lab/archives/352
↑上記のサイトを元に、リンクを画像にして作業すると
IE限定で、ポップアップが半分左に隠れた状態になります。
ブラウザを縮めると見えなくなります。
おそらくmodalResize()が問題かと思うのですが、解決できません。
html
1 2<!doctype html> 3<html> 4<head> 5<meta charset="utf-8"> 6<link rel="stylesheet" href="style.css"> 7<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 8<script src="modal.js"></script> 9<title>テスト</title> 10</head> 11<body> 12<a data-target="con1" class="modal-open"> 13 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 14</a> 15<a data-target="con2" class="modal-open"> 16 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 17</a> 18<a data-target="con3" class="modal-open"> 19 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 20</a> 21<!-- モーダル1 --> 22<div id="con1" class="modal-content" align="center"> 23 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""><img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""><img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 24<h3>テスト1</h3> 25<span>IE限定で左に画面半分くらいずれてしまう・・</span> 26<p><a class="modal-close">閉じる</a></p> 27</div> 28 29<!-- モーダル2 --> 30<div id="con2" class="modal-content" align="center"> 31 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""><img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 32 <h3>テスト2</h3> 33 <span>IE限定で左に画面半分くらいずれてしまう・・</span> 34 <p><a class="modal-close">閉じる</a></p> 35</div> 36 37<!-- モーダル3 --> 38<div id="con3" class="modal-content" align="center"> 39 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 40 <h3>テスト3</h3> 41 <span>IE限定で左に画面半分くらいずれてしまう・・</span> 42 <p><a class="modal-close">閉じる</a></p> 43</div> 44</body> 45</html>
css
1 2body { 3 margin:10px; 4 padding:10px; 5 border:10px solid #ddd; 6} 7 8.lock { 9 overflow:hidden; 10} 11 12.modal-content { 13 position:relative; 14 display:none; 15 width:50%; 16 margin:30px; 17 padding:10px 20px; 18 border:2px solid #aaa; 19 background:#fff; 20} 21 22.modal-content p { 23 margin:0; 24 padding:0; 25} 26 27.modal-overlay { 28 z-index:1; 29 display:none; 30 position:fixed; 31 top:0; 32 left:0; 33 width:100%; 34 height:120%; 35 background-color:rgba(0,0,0,0.75); 36} 37 38.modal-wrap { 39 z-index:2; 40 display:none; 41 position:fixed; 42 top:0; 43 left:0; 44 width:100%; 45 height:100%; 46 overflow:auto; 47} 48 49.modal-open { 50 color:#00f; 51 text-decoration:underline; 52} 53 54.modal-open:hover { 55 cursor:pointer; 56 color:#f00; 57} 58 59.modal-close { 60 color:#00f; 61 text-decoration:underline; 62} 63 64.modal-close:hover { 65 cursor:pointer; 66 color:#f00; 67} 68
javascript
1$(function(){ 2 // スクロールバーの横幅を取得 3 $('html').append('<div class="scrollbar" style="overflow:scroll;"></div>'); 4 var scrollsize = window.innerWidth - $('.scrollbar').prop('clientWidth'); 5 $('.scrollbar').hide(); 6 7 // 「.modal-open」をクリック 8 $('.modal-open').click(function(){ 9 // html、bodyを固定（overflow:hiddenにする） 10 $('html, body').addClass('lock'); 11 12 // オーバーレイ用の要素を追加 13 $('body').append('<div class="modal-overlay"></div>'); 14 15 // オーバーレイをフェードイン 16 $('.modal-overlay').fadeIn('slow'); 17 18 // モーダルコンテンツのIDを取得 19 var modal = '#' + $(this).attr('data-target'); 20 21 // モーダルコンテンツを囲む要素を追加 22 $(modal).wrap("<div class='modal-wrap'></div>"); 23 24 // モーダルコンテンツを囲む要素を表示 25 $('.modal-wrap').show(); 26 27 // モーダルコンテンツの表示位置を設定 28 modalResize(); 29 30 // モーダルコンテンツフェードイン 31 $(modal).fadeIn('slow'); 32 33 // モーダルコンテンツをクリックした時はフェードアウトしない 34 $(modal).click(function(e){ 35 e.stopPropagation(); 36 }); 37 38 // 「.modal-overlay」あるいは「.modal-close」をクリック 39 $('.modal-wrap, .modal-close').off().click(function(){ 40 // モーダルコンテンツとオーバーレイをフェードアウト 41 $(modal).fadeOut('slow'); 42 $('.modal-overlay').fadeOut('slow',function(){ 43 // html、bodyの固定解除 44 $('html, body').removeClass('lock'); 45 // オーバーレイを削除 46 $('.modal-overlay').remove(); 47 // モーダルコンテンツを囲む要素を削除 48 $(modal).unwrap("<div class='modal-wrap'></div>"); 49 }); 50 }); 51 52 // リサイズしたら表示位置を再取得 53 $(window).on('resize', function(){ 54 modalResize(); 55 }); 56 57 // モーダルコンテンツの表示位置を設定する関数 58 function modalResize(){ 59 // ウィンドウの横幅、高さを取得 60 var w = $(window).width(); 61 var h = $(window).height(); 62 63 // モーダルコンテンツの横幅、高さを取得 64 var mw = $(modal).outerWidth(true); 65 var mh = $(modal).outerHeight(true); 66 67 // モーダルコンテンツの表示位置を設定 68 if ((mh > h) && (mw > w)) { 69 $(modal).css({'left': 0 + 'px','top': 0 + 'px'}); 70 } else if ((mh > h) && (mw < w)) { 71 var x = (w - scrollsize - mw) / 2; 72 $(modal).css({'left': x + 'px','top': 0 + 'px'}); 73 } else if ((mh < h) && (mw > w)) { 74 var y = (h - scrollsize - mh) / 2; 75 $(modal).css({'left': 0 + 'px','top': y + 'px'}); 76 } else { 77 var x = (w - mw) / 2; 78 var y = (h - mh) / 2; 79 $(modal).css({'left': x + 'px','top': y + 'px'}); 80 } 81 } 82 83 }); 84});
###試したこと
chrome,firefox,スマホでの表示は正常なのを確認しております。
どうしてもIEだけうまくいきません。
モーダルウインドウ内の画像を２つ、３つにすると起きる現象で、パソコンの高さよりモーダルウインドウが低ければ起こりません。
どうかご教授願いたいです。
よろしくお願いします。
回答2件
0
ベストアンサー
以下のように行ってはいかがでしょうか？
HTML
1<!doctype html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 body { 8 margin: 10px; 9 padding: 10px; 10 border: 10px solid #ddd; 11 } 12 13 /* 追加ここから */ 14 div.modal-content img { 15 max-width: 100%; 16 margin-right: 5px; 17 } 18 19 div.modal-content img:last-of-type { 20 margin-right: 0; 21 } 22 /* 追加ここまで */ 23 24 .lock { 25 overflow: hidden; 26 } 27 28 .modal-content { 29 position: relative; 30 display: none; 31 width: 50%; 32 margin: 30px; 33 padding: 10px 20px; 34 border: 2px solid #aaa; 35 background: #fff; 36 } 37 38 .modal-content p { 39 margin: 0; 40 padding: 0; 41 } 42 43 .modal-overlay { 44 z-index: 1; 45 display: none; 46 position: fixed; 47 top: 0; 48 left: 0; 49 width: 100%; 50 height: 120%; 51 background-color: rgba(0, 0, 0, 0.75); 52 } 53 54 .modal-wrap { 55 z-index: 2; 56 display: none; 57 position: fixed; 58 top: 0; 59 left: 0; 60 width: 100%; 61 height: 100%; 62 overflow: auto; 63 } 64 65 .modal-open { 66 color: #00f; 67 text-decoration: underline; 68 } 69 70 .modal-open:hover { 71 cursor: pointer; 72 color: #f00; 73 } 74 75 .modal-close { 76 color: #00f; 77 text-decoration: underline; 78 } 79 80 .modal-close:hover { 81 cursor: pointer; 82 color: #f00; 83 } 84 </style> 85 <title>テスト</title> 86</head> 87<body> 88<a data-target="con1" class="modal-open"> 89 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 90</a> 91<a data-target="con2" class="modal-open"> 92 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 93</a> 94<a data-target="con3" class="modal-open"> 95 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 96</a> 97<div id="con1" class="modal-content" align="center"> 98 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 99 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 100 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 101 <h3>テスト1</h3> 102 <span>IE限定で左に画面半分くらいずれてしまう・・</span> 103 <p><a class="modal-close">閉じる</a></p> 104</div> 105<div id="con2" class="modal-content" align="center"> 106 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""><img 107 src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 108 <h3>テスト2</h3> 109 <span>IE限定で左に画面半分くらいずれてしまう・・</span> 110 <p><a class="modal-close">閉じる</a></p> 111</div> 112<div id="con3" class="modal-content" align="center"> 113 <img src="https://www.fastpic.jp/index.php?module=preview&file=0328329757.jpg" alt=""> 114 <h3>テスト3</h3> 115 <span>IE限定で左に画面半分くらいずれてしまう・・</span> 116 <p><a class="modal-close">閉じる</a></p> 117</div> 118<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 119<script> 120 $(function () { 121 $('html').append('<div class="scrollbar" style="overflow:scroll;"></div>'); 122 var scrollsize = $(window).innerWidth() - $('.scrollbar').innerWidth(); // 修正 123 $('.scrollbar').hide(); 124 $('.modal-open').click(function () { 125 $('html, body').addClass('lock'); 126 $('body').append('<div class="modal-overlay"></div>'); 127 $('.modal-overlay').fadeIn('slow'); 128 var modal = '#' + $(this).attr('data-target'); 129 $(modal).wrap("<div class='modal-wrap'></div>"); 130 $('.modal-wrap').show(); 131 modalResize(); 132 $(modal).fadeIn('slow'); 133 134 $(modal).click(function (e) { 135 e.stopPropagation(); 136 }); 137 $('.modal-wrap, .modal-close').off().click(function () { 138 $(modal).fadeOut('slow'); 139 $('.modal-overlay').fadeOut('slow', function () { 140 $('html, body').removeClass('lock'); 141 $('.modal-overlay').remove(); 142 $(modal).unwrap("<div class='modal-wrap'></div>"); 143 }); 144 }); 145 $(window).on('resize', function () { 146 modalResize(); 147 }); 148 149 function modalResize() { 150 var w = $(window).width(); 151 var h = $(window).height(); 152 var mw = $(modal).outerWidth(true); 153 var mh = $(modal).outerHeight(true); 154 155 if ((mh > h) && (mw > w)) { 156 $(modal).css({'left': 0 + 'px', 'top': 0 + 'px'}); 157 } else if ((mh > h) && (mw < w)) { 158 var x = (w - mw - scrollsize) / 2; 159 $(modal).css({'left': x + 'px', 'top': 0 + 'px'}); 160 } else if ((mh < h) && (mw > w)) { 161 var y = (h - scrollsize - mh) / 2; 162 $(modal).css({'left': 0 + 'px', 'top': y + 'px'}); 163 } else { 164 var x = (w - mw) / 2; 165 var y = (h - mh) / 2; 166 $(modal).css({'left': x + 'px', 'top': y + 'px'}); 167 } 168 } 169 }); 170 }); 171</script> 172</body> 173</html>
投稿2017/08/26 02:30
総合スコア14731
0
「モーダル」の意味を分かってないようです。モーダルウィンドウは javascript の alert や confirm のように、開いたらそれしか操作できないものです。複数同時に開くのは想定外です。
【追伸】
注文を付けるばかりでは何ですので、参考にされているサイトのデモを見てみました。
http://coolwebwindow.com/jquery-lab/archives/352
↑上記のサイトを元に、リンクを画像にして作業すると
IE限定で、ポップアップが半分左に隠れた状態になります。
・・・とのことですが、そもそもそのサイトのデモでも Windows 10 の IE11 では不具合があります。
例えば［リンク1］をクリックすると Chrome 60.0.3112.113 であればブラウザの画面上で左右方向では真ん中に表示されますが、Windows 10 の IE11 では「ポップアップが半分左に隠れた状態」になります。
ということで、そもそも参考にされている記事のコードに不具合があって、それをベースに使って同じ不具合が出たということのように思われますが。
何が違うのか IE11 の F12 開発者ツールと Chrome のディベロッパーツールでスタイルを調べてみると、モーダルウィンドウに適用されているインラインのスタイルが以下のようになっていました。
IE11
{
left: -346px;
top: 0px;
display: block;
}
Chrome
element.style {
display: block;
left: 139.5px;
top: 0px;
}
この left の設定が問題のようです。
これはスクリプトで計算してインラインに追加しているようですが、そこのところで IE11 と Chrome の違いが計算結果の違いになっているようです。
そこを直さないとダメだと思うのですが、どうすべきかまでは調べ切れていません。
そこを直そうとして悩むより、jQuey UI の Dialog とかもっと実績のあるものを使った方が良いのでは？
投稿2017/08/25 22:56
編集2017/08/26 04:27
退会済みユーザー
総合スコア0
「モーダル」という言葉の使い方が間違っています。「モーダル」をキーワードにググってヒットする記事を 2, 3 読んでください。ここのような文章だけでやり取りをする Q&A サイトでは正しく用語を使わないと話が通じません。というか、最初の質問文の上の方にあった「モーダルウィンドウを複数開く」というところだけ読んで、それ以上は読む気がしなくなる人も多いのではないかと思います（自分がそうです）。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/08/26 04:08