モーダルウィンドウでIEが表示ズレします。

よろしくお願いします。

###前提・実現したいこと

モーダルウィンドウを立ち上げた際に、モーダルウィンドウに表示したい内容をIEで正しく上下左右センタリングできるようにしたいです。

###発生している問題・エラーメッセージ

クロームやＦＦではモーダルウィンドウを立ち上げ後にちゃんとテキストなどの内容が上下中央に表示されています。

ＩＥの場合、テキストなどが画面の上部にズレて表示されてしまいます。
ただおかしなことにブラウザのサイズを変更するとパッとセンタリングされてきます。

その部分につきましては、以下の部分が関係しているのだと思っています。
$( window ).resize( centeringModal ) ;

###該当のソースコード
【script】

var sX_Modal = 0 ;
var sY_Modal = 0 ;

$(function(){

var nowModal = null ;
var modalClass = "modal" ;

var modals = document.getElementsByClassName( modalClass ) ;

for(var i=0,l=modals.length; l>i; i++){

modals[i].onclick = function(){

this.blur() ;

var target = this.getAttribute( "data-target" ) ;

if( typeof( target )=="undefined" || !target || target==null ){
return false ;
}

nowModal = document.getElementById( target ) ;

if( nowModal == null ){
return false ;
}

if( $( "#modal-overlay" )[0] ) return false ; 

var dElm = document.documentElement , dBody = document.body;
sX_Modal = dElm.scrollLeft || dBody.scrollLeft;
sY_Modal = dElm.scrollTop || dBody.scrollTop;

$( "body" ).append( '<div id="modal-overlay"></div>' ) ;
$( "#modal-overlay" ).fadeIn( "fast" ) ;

centeringModal() ;

$( nowModal ).fadeIn( "slow" ) ;

$( "#modal-overlay,#modal-close" ).unbind().click( function() {

window.scrollTo( sX_Modal , sY_Modal );

$( "#" + target + ",#modal-overlay" ).fadeOut( "fast" , function() {

$( '#modal-overlay' ).remove() ;

} ) ;

nowModal = null ;

} ) ;

}

}

$( window ).resize( centeringModal ) ;

function centeringModal() {

if( nowModal == null ) return false ;

var w = $( window ).width() ;
var h = $( window ).height() ;

//コンテンツ(#modal-content)の幅、高さを取得
// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
// var cw = $( nowModal ).outerWidth( {margin:true} ) ;
// var ch = $( nowModal ).outerHeight( {margin:true} ) ;
var cw = $( nowModal ).outerWidth() ;
var ch = $( nowModal ).outerHeight() ;

$( nowModal ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;

}

} ) ;

【ＣＳＳ】

.modal-content {
width: 50% ;
margin: 0 ;
padding: 10px 20px ;
/* border: 2px solid #aaa ;*/
position: fixed ;
display: none ;
z-index: 2 ;
color: #fff;
font-size: 18px;
}

.modal-content h3 {
margin-bottom: 40px;
text-align: center;
font-size: 56px;
font-weight: 900;
}

.modal-content p {
width: 360px;
margin: 0 auto;
font-weight: 900;
}

.modal-content ul {
text-align: center;

}
.modal-content ul li {
display: inline-block;
margin: 24px;
}

.modal-content ul li a {
text-decoration: underline;
font-weight: 900;
color: #fff;
}

#modal-overlay {
z-index: 1 ;
display: none ;
position: fixed ;
top: 0 ;
left: 0 ;
width: 100% ;
height: 120% ;
background-color: rgba( 0,0,0, 0.75 ) ;
}


div.btn-close {
margin-top: 120px;
text-align: center;
}

div.btn-close span {
text-decoration: none;
line-height: 0;
font-size: 56px;
color: #fff ;
}

div.btn-close a {
color: #fff ;
font-size: 16px;
}

【HTML】

<div id="modal-content-09" class="modal-content">
<h3>タイトル</h3>
<p>本文</p>
<div class="btn-close"><a id="modal-close"><span>×</span><br>閉じる</a></div>
</div>

###試したこと

ネットで調べてウィンドウが立ち上がった際に、
センタリングする記述を調べてきていろいろな場所に挿入してみたのですが、
モーダルが開かないなどうまくできませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)

動きとしてはクリックでモーダルを立ち上げ、立ち上がった場合に背景はスクロールしますが、
モーダルウィンドウを閉じると立ち上げた元の位置まで戻るという感じになるよう
いろいろなサイトを見て記述をマージしてみました。

何卒よろしくお願い申し上げます。

【追記1】
モーダルウィンドウにつきましては、以下のサイトさんを
参考にしてプログラムをマージ。実装致しました。

https://syncer.jp/jquery-modal-window

【追記2】
皆様、目にとめて頂いてありがとうございます。
teratail使うの初めてなので、書き方に至らぬ箇所等あるかと思いますがご容赦下さい。

キャプチャを追加致しました。アドレスなまずい情報などは
予め消しました。

すみませんが、よろしくお願い致します。

■クロームなど正常な表示

■ＩＥだとズレて表示されてしまいます。

【追記3】
失礼いたしました。
取り急ぎブラウザ、スクリプトのバージョンを記載します。
・クロームバージョン 53.0.2785.116 m
・ＩＥは11
・スクリプト（JQuery）は最新のものをDWLしてきて入れました。

※念のため他のバージョンで動く可能性を考え、グーグルAPIの外部ファイルを読みこむ形、

なので、1.10.1 （？）だと思います。

こちらで試しましたが直りませんでした。
取り急ぎバージョン報告させて頂きます。

引き続きよろしくお願い致します。

【追記4】
CyberMergina 様
先ほどはありがとうございました。ご連絡が遅れまして誠にすみません。
「console.log("w", w); console.log("h", h); console.log("cw", cw); console.log("ch", ch);」
上記のコードの件につきまして、
期待しつつ試してみたのですが変化はありませんでした。すみません・・・

引き続きご面倒かと思いますが、よろしくお願い致します。

【追記5】
CyberMergina 様
kei344 様

お世話になります。週末を挟んでしまい、ご連絡が遅れてすみません。
console.log()の結果についてキャプチャを貼付けいたします。
『値』についてはおそらく３枚目のイメージに出ているものかと思います。
ここからどのように直していけば良いのかが分かりませんで、すみません。
ご面倒をおかけしてすみませんが、引き続きよろしくお願い申し上げます。

■通常の画面

■通常の画面でモーダルウィンドウを立ち上げた画面

■console.log()を入れた後でモーダルウィンドウを立ち上げた画面

【追記6】
各位

お世話になります。
修正が終わり、クローム、FF、IEとクロスブラウザで
正常に表示させることができました。

原因は、素人考えですが、

//	$( window ).resize( centeringModal ) ;  ※１ windowリサイズ時にセンタリング

	function centeringModal() {

		if( nowModal == null ) return false ;

		var w = $( window ).width() ;
		var h = $( window ).height() ;

		//コンテンツ(#modal-content)の幅、高さを取得
		// jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
//		var cw = $( nowModal ).outerWidth( {margin:true} ) ;
//		var ch = $( nowModal ).outerHeight( {margin:true} ) ;
		var cw = $( nowModal ).outerWidth() ;
		var ch = $( nowModal ).outerHeight() ;

//		$( nowModal ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ; ※２ モーダルを立ち上げ時にセンタリング

上記コードの※１、２が問題になっていたのではと思っています。
上記コメントアウトし、CSSでセンタリングすることで、
期待する動きになりました。

CSSは、残念ながらpositionがabsoluteになっていましたので、
スクロールされてしまったり、
センタリングもできなかったのですが、
width:50%
top:0
bottom:0
left:0
right:0
・・・
fixedでセンタリングする記事を見て、
以下の通りにして中央揃えにすることができました。

  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

その際、大変役にたったのが
display:blockで表示させて調整するなどのテクニックです。

皆様のおかげで大変勉強にもなりました。

JQueryで解決できなかったのは残念ですが、
うまく表示させることができ、
本当に助かりました。

心より御礼申し上げます。
またの際にもどうぞよろしくお願い申し上げます。

退会済みユーザー

2016/09/30 03:12

モーダルとは何ですか？（コードを読めばわかるとはいわないでくださいね）あと、使っているブラウザのバージョンは？

aKusano

2016/09/30 03:32

コード部分の前後を```で囲んでコード表示にしてもらえると読みやすいです。

aKusano

2016/09/30 03:35

あと実際の画面がどうなっているのか、ChromeとIEでそれぞれキャプチャを取って貼ってもらえると状況が分かりやすいかも。

lingwood

2016/09/30 05:05

ご質問ありがとうございます。情報を追記致しましたので、よろしくお願い致します。キャプチャですが、下がIEの場合の表示となります。 IEのバージョンは11となります。できる限り広範囲に各ブラウザ対応できればと思います。なお、この状態でブラウザをリサイズした瞬間にズレている表示がセンタリングされるという現象になっています。これを「ブラウザを立ち上げた時点からちゃんとセンタリングされているようにしたい」という内容となります。皆様大変ご多忙のことと思いますが、どうぞよろしくお願い致します。

退会済みユーザー

2016/09/30 05:56

最初の追加情報での依頼「使っているブラウザのバージョンは？」に答えていただけませんか。CSS, JavaScript はブラウザに依存するところが大きいのです。あと、jQuery を使っているようなので jQuery のバージョンもお願いします。

CyberMergina

2016/09/30 06:00 編集

centeringModal関数の、「var ch = $( nowModal ).outerHeight() ;」の次の行に下記コードを書き、ChromeとIEで比較すると値に大きな違いが無いか確認して頂けますか？「console.log("w", w); console.log("h", h); console.log("cw", cw); console.log("ch", ch); 」

kei344

2016/09/30 12:15

console.log() はデベロッパーツール（開発者ツール）でのデバッグ用です。それで採れた数値が想定している数値かどうかを見てください。 http://eng-entrance.com/javascript-display-error

lingwood

2016/09/30 13:08

kei344様、CyberMergina様お世話になります。ご教授いただきまして、誠にありがとうございます。無知ですみません、、そうだったんですね。『値に』とありましたので、引っ掛かってはいたのですが、見た目で判断していました。月曜日改めて会社で確認します。色々とご教授いただきましてありがとうございます。引き続きご面倒見ていただけましたらと思います。何卒よろしくお願いいたします。

goute

2016/09/30 22:49

IEはpaddingの認識がずれているので、その関係かもしれません。 http://d.hatena.ne.jp/kotaro01/20100529/1275141933

退会済みユーザー

2016/10/01 06:26

jQuery UI とか Bootstrap などの既存のライブラリを使うという選択肢はないのでしょうか？　 jQuery UI - Dialog: http://jqueryui.com/dialog/ 　 Bootstrap - Modals: http://getbootstrap.com/javascript/#modals 　自分の勉強のため自力でコードを書いて実装したいということでしたらすみません、忘れてください。

CyberMergina

2016/10/03 00:34

追記ありがとうございます。console.logはデバッグ用の関数になります。＜① F12キーを押し、デバッグ用画面を表示。② 構築中webサイト側のウィンドウをクリックしF5キーを押す(更新) ③ １.で表示した「デバッグ用画面」内の「コンソール」をクリック ④ 表示されている値を確認＞以上の手順を踏んでみてください。

CyberMergina

2016/10/03 00:35 編集

[ console.logの参考 | http://web-terminal.blogspot.jp/2013/04/javascriptlog.html ] IEでもconsole.logなら使えるので、試してみてください。

lingwood

2016/10/03 02:45

SurferOnWww　様お世話になります。アプローチ方法を変えてみたらというご指摘、アドバイスを頂きまして誠にありがとうございます。このまま直らないようならやはりそれも考えたいと思っています。親身ご助言をいただきありがとうございます。

lingwood

2016/10/03 02:53

goute　様ご回答ありがとうございます。 Paddingもそうですが、IEの何らかの特性かと思いまして、 DOMを使っていろいろと値を変更してみたのですが、良くわからずこちらのサイトに行き着きました。また何かわかりそうなことがありましたらご教授下さい。

行動規範の内容に同意します

回答2件

ベストアンサー

コンソールに、重大なHTMLの構文エラーが出ていますね。
どこかで閉じタグが抜けているとか、その手の問題が発生している状態と思われます。
まずはHTMLのバリデートをクリアして、問題となっている箇所を絞り込んでいく必要がありそうです。

１． HTMLの構文エラーを無くす
２． JSを使わず静的にモーダルを表示した時に正しくIEでも中央に配置されることを確認する
３． HTMLとCSSに問題ないことを確認したらJSの挙動を更に詰めて確認していく

という手順を順に追って行ったほうが良いと思います。
（※２についてはCSS側ではなく完全にJS側で制御する設計なのであれば飛ばしても良いです。）

投稿2016/10/03 03:47

aKusano

総合スコア3763

lingwood

2016/10/03 05:33

aKusano　様ご指導ありがとうございます。構文チェックしなおしエラーをなくすことができました。ただ「DOM7011: このページのコードによって、バックワードキャッシュとフォワードキャッシュが無効になりました。詳細については、http://go.microsoft.com/fwlink/?LinkID=291337 を参照してください。」とナビゲーションが発生しましたの2つだけ残ってしまっているのですが、無関係ですよね？一応調べたのですが、良くわからずただレイアウトとは無関係な感じでしたので、それ以外はクリアとなりました。ただご指導いただいた通り、静的にモーダルを表示というのが良くわかりませんで、JSを入れないとやはりモーダルが立ち上がってくれません。なので、デバッガツール立ち上げてCSSをちょこちょこいじったりもしているのですが、いまいちそれもうまくできていません。 CSSいじりについてはもう少しやってみたいと思います。取り急ぎで失礼ですが、御礼申し上げます。

gin

2016/10/03 06:16

これをCSSの一番最後に追加するとモーダルが立ち上がった風になると思うので一度見てみてはと思います。 .modal-content { display: black; } #modal-overlay { display: block; } OKなら3の工程ですね。

lingwood

2016/10/03 07:45

gin 様お世話になります。ご指導ありがとうございます。今しがた上記コードをそのまま一番下に追加してJSの読み込み部分をコメントアウトしました。その状態やってみましたが、やはりモーダルが立ち上がりませんで、何か間違っているのでしょうか・・・？何度もすみませんが、よろしくお願い致します。

aKusano

2016/10/03 08:13

.modal-content { display: block; /*blackじゃないですよ*/ } ↑ginさんのコードに誤植があるので、そのままコピペしたら動きません。念のためご確認を。あと、JSでやるのは表示／非表示を制御するところだけにして、モーダルを中央に配置するのはCSSで処理することにしたらどうでしょう？セレクタ { width: 50% ; /*auto以外の数値*/ margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0; } 上下左右中央にしたいブロックに対して上記のCSSコードをあてれば、親要素領域の上下左右中央にCSSだけで配置できます。 #modal-overlayのブロック内で、.modal-contentをCSSで中央配置するようにしておき、表示・非表示だけJSで制御するようにすれば、今よりシンプルになりますので不具合も生じにくいのではないでしょうか。現在発生している問題の解決法ではありませんが、もしどうしても直らないのであればプランBとして検討してみてください。

lingwood

2016/10/03 09:55

aKusano 様お世話になります。ご回答ありがとうございます。なるほど、表示されました。 display:blockでnoneから強制的に表示させる状態にするということだったんですね。理解力に乏しくすみませんでした。gin様もありがとうございました。表示されたものですが、ブラウザの一番下に重なって表示されていました。これはちょっと明日、いじってみたいと思います。また、ＪＳのコメントアウトを解いてみたのですが、正常に表示されるものもあればズレてるものもあるのでやっぱりコードが悪いのでしょうね。意外と１行追加するだけで正常になったなんてことも良くあるかとは思うんですが・・・。明日改めてご教授いただいたセンタリングの方法を試していきたいと思います。ちゃんと表示されることが目的ですので、CSSでの解決も全然助かります。お忙しい最中ご対応いただきましたことすぐにでも試していきたいのですが、今日は帰れと言われておりまして、、、失礼させて頂きますが、本当にありがとうございます。またよろしくお願い申し上げます。

gin

2016/10/04 03:49

うっかりミスすみません… でも解決しているようでよかったです^^

lingwood

2016/10/04 04:06

aKusano 様、gin　様お世話になります。この度はいろいろとご相談に乗ってくださいまして、誠にありがとうございました。 display:blockにして表示させた状態で作業できましたので、非常に効率的でした。とても助かりました。また、解決に至った経緯は上記に追記させて頂きました。本当にありがとうございました。

aKusano

2016/10/04 04:26

解決して何よりです( ´∀｀) transformでの中央揃えも便利ですよねー。私自身JS苦手なので、CSSで可能なことは極力CSSにおまかせして、どうしても無理なところだけJSで制御することで日々乗り切っております。お互いがんばりましょう！

lingwood

2016/10/04 05:02

aKusano　様お世話になります。おなじく！です　笑プログラム系は本当に苦手で・・・励みになります。頑張ります！またの際にもどうぞよろしくお願い致します。

行動規範の内容に同意します

CSSのvender-prefixの問題ではないでしょうか。
http://autoprefixer.github.io/にてCSSにvender-prefix付与してみる。

投稿2016/10/03 03:24

hibikikudo

総合スコア238

lingwood

2016/10/03 05:56

hibikikudo　様ご教示ありがとうございます。お恥ずかしながら知らず、すごく便利で驚きました。さっそくやってみたのですが、ベンダープレフィックスが必要な個所がなく、未だ解決に至っていないのが現状です。でも、今まで何かしらあるたびに都度調べていたので、とても助かります。また今後ともよろしくお願い致します。

行動規範の内容に同意します

あなたの回答