編集履歴

質問編集履歴

修正

2016/10/04 04:03

投稿

lingwood

スコア40

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -542,7 +542,7 @@
 原因は、素人考えですが、
-'''
+```
 //	$( window ).resize( centeringModal ) ;  ※１ windowリサイズ時にセンタリング
@@ -578,7 +578,7 @@
 //		$( nowModal ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ; ※２ モーダルを立ち上げ時にセンタリング
-'''
+```
@@ -612,7 +612,7 @@
 以下の通りにして中央揃えにすることができました。
-'''
+```
   position: fixed;
@@ -624,7 +624,7 @@
   transform: translate(-50%, -50%);
-'''
+```

表示ズレが直りました。

2016/10/04 04:03

投稿

lingwood

スコア40

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -521,3 +521,131 @@
 ■console.log()を入れた後でモーダルウィンドウを立ち上げた画面
 ![イメージ説明](d71922faa99060d0f725d3bcbabf7353.jpeg)
+【追記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/10/04 04:01

投稿

lingwood

スコア40

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -496,6 +496,16 @@
 console.log()の結果についてキャプチャを貼付けいたします。
+『値』についてはおそらく３枚目のイメージに出ているものかと思います。
+ここからどのように直していけば良いのかが分かりませんで、すみません。
+ご面倒をおかけしてすみませんが、引き続きよろしくお願い申し上げます。
 ■通常の画面
 ![イメージ説明](8d00cec9416e1a848de1d53caa1f6dbd.jpeg)

console\.log\(\)による数値採取、キャプチャ貼付け

2016/10/03 02:57

投稿

lingwood

スコア40

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -481,3 +481,33 @@
 ![イメージ説明](eee0e21c46c9a226c90c644cb0be3c41.png)
 引き続きご面倒かと思いますが、よろしくお願い致します。
+【追記5】
+CyberMergina 様
+kei344 様
+お世話になります。週末を挟んでしまい、ご連絡が遅れてすみません。
+console.log()の結果についてキャプチャを貼付けいたします。
+■通常の画面
+![イメージ説明](8d00cec9416e1a848de1d53caa1f6dbd.jpeg)
+■通常の画面でモーダルウィンドウを立ち上げた画面
+![イメージ説明](895fca9203ccd0f74ab062d7798ced9b.jpeg)
+■console.log()を入れた後でモーダルウィンドウを立ち上げた画面
+![イメージ説明](d71922faa99060d0f725d3bcbabf7353.jpeg)

追記しました。

2016/10/03 02:37

投稿

lingwood

スコア40

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -463,3 +463,21 @@
 引き続きよろしくお願い致します。
+【追記4】
+CyberMergina 様
+先ほどはありがとうございました。ご連絡が遅れまして誠にすみません。
+「console.log("w", w); console.log("h", h); console.log("cw", cw); console.log("ch", ch);」
+上記のコードの件につきまして、
+期待しつつ試してみたのですが変化はありませんでした。すみません・・・
+![イメージ説明](eee0e21c46c9a226c90c644cb0be3c41.png)
+引き続きご面倒かと思いますが、よろしくお願い致します。

バージョンについて追記いたしました。

2016/09/30 08:44

投稿

lingwood

スコア40

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -425,3 +425,41 @@
 ■ＩＥだとズレて表示されてしまいます。
 ![■ＩＥだとうまく表示されません。](2086e1e2f5231d15ec81f21839364f8d.jpeg)
+【追記3】
+失礼いたしました。
+取り急ぎブラウザ、スクリプトのバージョンを記載します。
+・クローム バージョン 53.0.2785.116 m
+・ＩＥは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 （？）だと思います。
+こちらで試しましたが直りませんでした。
+取り急ぎバージョン報告させて頂きます。
+引き続きよろしくお願い致します。

追記修正

2016/09/30 08:33

投稿

lingwood

スコア40

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -416,6 +416,12 @@
+■クロームなど正常な表示
 ![■クロームやＦＦだと正常に表示されます。](ce251bff6e164af8f1ad2de9b0a40e10.jpeg)
+■ＩＥだとズレて表示されてしまいます。
 ![■ＩＥだとうまく表示されません。](2086e1e2f5231d15ec81f21839364f8d.jpeg)

追記いたしました。キャプチャを追加致しました。

2016/09/30 05:01

投稿

lingwood

スコア40

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -383,3 +383,39 @@
 何卒よろしくお願い申し上げます。
+【追記1】
+モーダルウィンドウにつきましては、以下のサイトさんを
+参考にしてプログラムをマージ。実装致しました。
+https://syncer.jp/jquery-modal-window
+【追記2】
+皆様、目にとめて頂いてありがとうございます。
+teratail使うの初めてなので、書き方に至らぬ箇所等あるかと思いますがご容赦下さい。
+キャプチャを追加致しました。アドレスなまずい情報などは
+予め消しました。
+すみませんが、よろしくお願い致します。
+![■クロームやＦＦだと正常に表示されます。](ce251bff6e164af8f1ad2de9b0a40e10.jpeg)
+![■ＩＥだとうまく表示されません。](2086e1e2f5231d15ec81f21839364f8d.jpeg)

コード部分を囲みました。

2016/09/30 05:00

投稿

lingwood

スコア40

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -36,7 +36,7 @@
 *****************************【script】*****************************
+```
 var sX_Modal = 0 ;
@@ -198,11 +198,11 @@
 } ) ;
+```
 *****************************【ＣＳＳ】*****************************
+```
 .modal-content {
@@ -340,11 +340,11 @@
 }
+```
 *****************************【HTML】*****************************
+```
 <div id="modal-content-09" class="modal-content">
@@ -356,7 +356,7 @@
 </div>
+```
 ###試したこと