よろしくお願いします。
###前提・実現したいこと
モーダルウィンドウを立ち上げた際に、モーダルウィンドウに表示したい内容を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使うの初めてなので、書き方に至らぬ箇所等あるかと思いますがご容赦下さい。
キャプチャを追加致しました。アドレスなまずい情報などは
予め消しました。
すみませんが、よろしくお願い致します。
【追記3】
失礼いたしました。
取り急ぎブラウザ、スクリプトのバージョンを記載します。
・クローム バージョン 53.0.2785.116 m
・IEは11
・スクリプト(JQuery)は最新のものをDWLしてきて入れました。
※念のため他のバージョンで動く可能性を考え、グーグル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で解決できなかったのは残念ですが、
うまく表示させることができ、
本当に助かりました。
心より御礼申し上げます。
またの際にもどうぞよろしくお願い申し上げます。
回答2件
あなたの回答
tips
プレビュー