teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

コード追加

2020/09/13 03:06

投稿

h_ryoooh
h_ryoooh

スコア13

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,3 @@
1
- お世話になります。
2
-
3
1
  モーダルウィンドウについての質問です。
4
2
 
5
3
  ボタンを押したらモダールウィンドウで画像が開くという実装を、ギャラリーのように複数行いたいのですが、スマホとパソコンで表示する画像を変えたいです。
@@ -9,4 +7,110 @@
9
7
  [https://syncer.jp/jquery-modal-window](https://syncer.jp/jquery-modal-window)
10
8
  のサイトを参考に作りました。
11
9
 
10
+ ```ここに言語を入力
11
+ ーモーダルを開く方のhtml-
12
+ <div class="select-box-item mr pc">
13
+ <img src="image/tokyo-kenkyo.jpg" alt="">
14
+ <h3 class="story-place">Tokyo Kenkyo<span>カフェ</span></h3>
15
+ <p class="select-thin">3フロアから成るおしゃれカフェで、<br>
16
+ 日替わりでほっこり味わう和&洋モーニング</p>
17
+ <a class="modal-syncer button-link readmore" data-target="modal-content-01">READ MORE<span class="arrow"></span></a>
18
+ </div>
19
+ <div class="select-box-item mr tab">
20
+ <img src="image/tokyo-kenkyo.jpg" alt="">
21
+ <h3 class="story-place">Tokyo Kenkyo<span>カフェ</span></h3>
22
+ <p class="select-thin">3フロアから成るおしゃれカフェで、<br>
23
+ 日替わりでほっこり味わう和&洋モーニング</p>
24
+ <a class="modal-syncer button-link readmore" data-target="modal-content-01-sp">READ MORE<span class="arrow"></span></a>
25
+ </div>
26
+
27
+ ―開いたモーダルの中身のhtml-
28
+ <div id="modal-content-01" class="modal-content pc">
29
+ <div class="modal-content-inner">
30
+ <img src="image/pc_run&walk_Tokyo.jpg" alt="">
31
+ <div class="button-link-x">
32
+ <a id="modal-close" class="button-link button-link-x"><i class="fas fa-times-circle"></i></a>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ <div id="modal-content-01-sp" class="modal-content tab">
37
+ <div class="modal-content-inner">
38
+ <img src="image/sp_run&walk_Tokyo.jpg" alt="">
39
+ <div class="button-link-x">
40
+ <a id="modal-close" class="button-link button-link-x"><i class="fas fa-times-circle"></i></a>
41
+ </div>
42
+ </div>
43
+ </div>
44
+
45
+ ーjs-
46
+ //モーダルウィンドウ
47
+ $(function(){
48
+ //グローバル変数
49
+ var nowModalSyncer = null ; //現在開かれているモーダルコンテンツ
50
+ var modalClassSyncer = "modal-syncer" ; //モーダルを開くリンクに付けるクラス名
51
+ //モーダルのリンクを取得する
52
+ var modals = document.getElementsByClassName( modalClassSyncer ) ;
53
+ //モーダルウィンドウを出現させるクリックイベント
54
+ for(var i=0,l=modals.length; l>i; i++){
55
+ //全てのリンクにタッチイベントを設定する
56
+ modals[i].onclick = function(){
57
+ //ボタンからフォーカスを外す
58
+ this.blur() ;
59
+ //ターゲットとなるコンテンツを確認
60
+ var target = this.getAttribute( "data-target" ) ;
61
+ //ターゲットが存在しなければ終了
62
+ if( typeof( target )=="undefined" || !target || target==null ){
63
+ return false ;
64
+ }
65
+ //コンテンツとなる要素を取得
66
+ nowModalSyncer = document.getElementById( target ) ;
67
+ //ターゲットが存在しなければ終了
68
+ if( nowModalSyncer == null ){
69
+ return false ;
70
+ }
71
+ //キーボード操作などにより、オーバーレイが多重起動するのを防止する
72
+ if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない
73
+ //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する
74
+ //オーバーレイを出現させる
75
+ $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
76
+ $( "#modal-overlay" ).fadeIn( "fast" ) ;
77
+ //コンテンツをセンタリングする
78
+ centeringModalSyncer() ;
79
+ //コンテンツをフェードインする
80
+ $( nowModalSyncer ).fadeIn( "slow" ) ;
81
+ //[#modal-overlay]、または[#modal-close]をクリックしたら…
82
+ $( "#modal-overlay,#modal-close" ).unbind().click( function() {
83
+ //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
84
+ $( "#" + target + ",#modal-overlay" ).fadeOut( "slow" , function() {
85
+ //[#modal-overlay]を削除する
86
+ $( '#modal-overlay' ).remove() ;
87
+ } ) ;
88
+ //現在のコンテンツ情報を削除
89
+ nowModalSyncer = null ;
90
+ } ) ;
91
+ }
92
+ }
93
+
94
+ //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
95
+ $( window ).resize( centeringModalSyncer ) ;
96
+ //センタリングを実行する関数
97
+ function centeringModalSyncer() {
98
+ //モーダルウィンドウが開いてなければ終了
99
+ if( nowModalSyncer == null ) return false ;
100
+ //画面(ウィンドウ)の幅、高さを取得
101
+ var w = $( window ).width() ;
102
+ var h = $( window ).height() ;
103
+ //コンテンツ(#modal-content)の幅、高さを取得
104
+ // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
105
+ // var cw = $( nowModalSyncer ).outerWidth( {margin:true} ) ;
106
+ // var ch = $( nowModalSyncer ).outerHeight( {margin:true} ) ;
107
+ var cw = $( nowModalSyncer ).outerWidth() ;
108
+ var ch = $( nowModalSyncer ).outerHeight() ;
109
+ //センタリングを実行する
110
+ $( nowModalSyncer ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
111
+ }
112
+ } ) ;
113
+ ```
114
+ サーバーにアップして、PCとSPのモーダル画像を違う画像したく思います。PCですと普通に閉じるボタンを押すと消えるのですが、SPでも閉じるのですがその直後に自動的にモーダルが再度表示されてしまいます。
115
+
12
116
  ご教授お願い申し上げます。

2

参考リンクの追加

2020/09/13 03:06

投稿

h_ryoooh
h_ryoooh

スコア13

title CHANGED
File without changes
body CHANGED
@@ -6,7 +6,7 @@
6
6
  表示自体はパソコンとスマホどちらもうまくできるのですが、スマホでモダールを閉じるボタンを押すと、一旦消えるのに、また画像だけが表示されてしまいます。
7
7
  どのようにしたらスマホでも画像が消えるか、お力添えをいただきたく存じます。
8
8
 
9
- https://syncer.jp/jquery-modal-window
9
+ [https://syncer.jp/jquery-modal-window](https://syncer.jp/jquery-modal-window)
10
10
  のサイトを参考に作りました。
11
11
 
12
12
  ご教授お願い申し上げます。

1

作成する上で参考にしたサイト

2020/09/13 02:18

投稿

h_ryoooh
h_ryoooh

スコア13

title CHANGED
File without changes
body CHANGED
@@ -6,4 +6,7 @@
6
6
  表示自体はパソコンとスマホどちらもうまくできるのですが、スマホでモダールを閉じるボタンを押すと、一旦消えるのに、また画像だけが表示されてしまいます。
7
7
  どのようにしたらスマホでも画像が消えるか、お力添えをいただきたく存じます。
8
8
 
9
+ https://syncer.jp/jquery-modal-window
10
+ のサイトを参考に作りました。
11
+
9
12
  ご教授お願い申し上げます。