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

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

ただいまの
回答率

89.05%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,612

lingwood

score 39

よろしくお願いします。

前提・実現したいこと

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

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

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

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"} ) ;

}

} ) ;


*************************【CSS】*************************

.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使うの初めてなので、書き方に至らぬ箇所等あるかと思いますがご容赦下さい。

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

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

■クロームなど正常な表示
■クロームやFFだと正常に表示されます。

■IEだとズレて表示されてしまいます。
■IEだとうまく表示されません。

【追記3】
失礼いたしました。
取り急ぎブラウザ、スクリプトのバージョンを記載します。
・クローム バージョン 53.0.2785.116 m
・IEは11
・スクリプト(JQuery)は最新のものをDWLしてきて入れました。
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>n  
<script type="text/javascript" src="../js/jquery-migrate-1.4.1.min.js"></script>

※念のため他のバージョンで動く可能性を考え、グーグルAPIの外部ファイルを読みこむ形、
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

なので、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()の結果についてキャプチャを貼付けいたします。
『値』についてはおそらく3枚目のイメージに出ているものかと思います。
ここからどのように直していけば良いのかが分かりませんで、すみません。
ご面倒をおかけしてすみませんが、引き続きよろしくお願い申し上げます。

■通常の画面
イメージ説明

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

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

【追記6】
各位

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

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

//    $( window ).resize( centeringModal ) ;  ※1 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"} ) ; ※2 モーダルを立ち上げ時にセンタリング

上記コードの※1、2が問題になっていたのではと思っています。
上記コメントアウトし、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で解決できなかったのは残念ですが、
うまく表示させることができ、
本当に助かりました。

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • CyberMergina

    2016/10/03 09:35 編集

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

    キャンセル

  • lingwood

    2016/10/03 11:45

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

    キャンセル

  • lingwood

    2016/10/03 11:53

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

    キャンセル

回答 2

checkベストアンサー

+2

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/04 13:06

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

    また、解決に至った経緯は上記に追記させて頂きました。

    本当にありがとうございました。

    キャンセル

  • 2016/10/04 13:26

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

    キャンセル

  • 2016/10/04 14:02

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/03 14:56

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

    キャンセル

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

  • ただいまの回答率 89.05%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る