teratail
回答率
85.37%
teratail 10th-anniversary
teratail 10th-anniversary
質問するログイン新規登録
トップモーダルダイアログに関する質問画像クリックで表示されるモーダルウィンドウを複数作りたい

編集履歴

質問編集履歴

4

コード修正

2024/09/04 23:45

投稿

kroos
kroos

スコア1

test CHANGED
File without changes
test CHANGED
@@ -31,24 +31,24 @@
31
31
  <body>
32
32
  <h1>モーダルウィンドウ テスト用</h1>
33
33
 
34
- <img id="mainImage" src="画像ファイル" alt="Main Image" class="clickable-image1">
34
+ <img id="mainImage1" src="画像ファイル" alt="Main Image" class="clickable-image1">
35
35
  <!-- Modal -->
36
- <div id="myModal" class="modal1">
36
+ <div id="myModal1" class="modal1">
37
37
  <div class="modal-content1">
38
38
  <span class="close">&times;</span>
39
39
  <h2>タイトル</h2>
40
- <img id="modalImage" src="" alt="Modal Image" class="modal-image1">
40
+ <img id="modalImage1" src="" alt="Modal Image" class="modal-image1">
41
41
  <p>任意の文章</p>
42
42
  </div>
43
43
  </div><br>
44
44
 
45
- <img id="mainImage" src="画像ファイル" alt="Main Image" class="clickable-image2">
45
+ <img id="mainImage2" src="画像ファイル" alt="Main Image" class="clickable-image2">
46
46
  <!-- Modal -->
47
- <div id="myModal" class="modal2">
47
+ <div id="myModal2" class="modal2">
48
48
  <div class="modal-content2">
49
49
  <span class="close">&times;</span>
50
50
  <h2>タイトル</h2>
51
- <img id="modalImage" src="" alt="Modal Image" class="modal-image2">
51
+ <img id="modalImage2" src="" alt="Modal Image" class="modal-image2">
52
52
  <p>任意の文章</p>
53
53
  </div>
54
54
  </div><br>
@@ -200,3 +200,5 @@
200
200
  写真2にはモーダルウィンドウ2・・・)
201
201
 
202
202
  ③画像が複数あるverに直しました。
203
+
204
+ ④idを修正しました。
モーダルダイアログJavaScriptHTMLCSS

3

追記

2024/09/04 22:41

投稿

kroos
kroos

スコア1

test CHANGED
@@ -1 +1 @@
1
- モーダルウィンドウの実装について
1
+ 画像クリックで表示されるモーダルウィンドウを複数作りたい
test CHANGED
@@ -191,8 +191,12 @@
191
191
 
192
192
  ### 補足
193
193
  追記
194
+ ① 「画像は複数枚あり」の部分が質問に含まれていないとのこと、修正しました。
195
+ 失礼いたしました。
196
+
194
- ① 写真掲載サイトを作りたいと思っています。
197
+ ② 写真掲載サイトを作りたいと思っています。
195
198
  載せた写真全てに対してそれぞれ異なるモーダルウィンドウを表示させたいです。
196
199
  (写真1にはモーダルウィンドウ1、
197
200
  写真2にはモーダルウィンドウ2・・・)
201
+
198
- ②画像が複数あるverに直しました。
202
+ ③画像が複数あるverに直しました。
モーダルダイアログJavaScriptHTMLCSS

2

追記

2024/09/04 22:39

投稿

kroos
kroos

スコア1

test CHANGED
File without changes
test CHANGED
@@ -191,4 +191,8 @@
191
191
 
192
192
  ### 補足
193
193
  追記
194
+ ① 写真掲載サイトを作りたいと思っています。
195
+ 載せた写真全てに対してそれぞれ異なるモーダルウィンドウを表示させたいです。
196
+ (写真1にはモーダルウィンドウ1、
197
+ 写真2にはモーダルウィンドウ2・・・)
194
- 画像が複数あるverに直しました。
198
+ ②画像が複数あるverに直しました。
モーダルダイアログJavaScriptHTMLCSS

1

追記

2024/09/04 22:37

投稿

kroos
kroos

スコア1

test CHANGED
File without changes
test CHANGED
@@ -19,6 +19,7 @@
19
19
  ### 該当のソースコード
20
20
 
21
21
  ```modal.html
22
+
22
23
  <!DOCTYPE html>
23
24
  <html lang="ja">
24
25
  <head>
@@ -30,13 +31,24 @@
30
31
  <body>
31
32
  <h1>モーダルウィンドウ テスト用</h1>
32
33
 
33
- <img id="mainImage" src="画像ファイル" alt="Main Image" class="clickable-image">
34
+ <img id="mainImage" src="画像ファイル" alt="Main Image" class="clickable-image1">
34
35
  <!-- Modal -->
35
- <div id="myModal" class="modal">
36
+ <div id="myModal" class="modal1">
36
- <div class="modal-content">
37
+ <div class="modal-content1">
37
38
  <span class="close">&times;</span>
38
39
  <h2>タイトル</h2>
39
- <img id="modalImage" src="" alt="Modal Image" class="modal-image">
40
+ <img id="modalImage" src="" alt="Modal Image" class="modal-image1">
41
+ <p>任意の文章</p>
42
+ </div>
43
+ </div><br>
44
+
45
+ <img id="mainImage" src="画像ファイル" alt="Main Image" class="clickable-image2">
46
+ <!-- Modal -->
47
+ <div id="myModal" class="modal2">
48
+ <div class="modal-content2">
49
+ <span class="close">&times;</span>
50
+ <h2>タイトル</h2>
51
+ <img id="modalImage" src="" alt="Modal Image" class="modal-image2">
40
52
  <p>任意の文章</p>
41
53
  </div>
42
54
  </div><br>
@@ -46,7 +58,7 @@
46
58
  ```
47
59
 
48
60
  ```modal.css
49
- /* Modal styles */
61
+
50
62
  .close {
51
63
  color: #aaa;
52
64
  float: right;
@@ -60,15 +72,13 @@
60
72
  cursor: pointer;
61
73
  }
62
74
 
63
-
64
-
65
- .clickable-image {
75
+ .clickable-image1 {
66
76
  width: 100%;
67
77
  max-width: 500px;
68
78
  height: auto;
69
79
  cursor: pointer;
70
80
  }
71
- .modal {
81
+ .modal1 {
72
82
  display: none;
73
83
  position: fixed;
74
84
  z-index: 1;
@@ -79,7 +89,7 @@
79
89
  overflow: auto;
80
90
  background-color: rgba(0,0,0,0.4);
81
91
  }
82
- .modal-content {
92
+ .modal-content1 {
83
93
  background-color: #fefefe;
84
94
  margin: 15% auto;
85
95
  padding: 20px;
@@ -88,16 +98,52 @@
88
98
  max-width: 600px;
89
99
  position: relative;
90
100
  }
91
- .modal-image {
101
+ .modal-image1 {
92
102
  width: 100%;
93
103
  max-width: 200px;
94
104
  height: auto;
95
105
  display: block;
96
106
  margin: 0 auto;
97
107
  }
108
+
109
+ .clickable-image2 {
110
+ width: 100%;
111
+ max-width: 500px;
112
+ height: auto;
113
+ cursor: pointer;
114
+ }
115
+ .modal2 {
116
+ display: none;
117
+ position: fixed;
118
+ z-index: 1;
119
+ left: 0;
120
+ top: 0;
121
+ width: 100%;
122
+ height: 100%;
123
+ overflow: auto;
124
+ background-color: rgba(0,0,0,0.4);
125
+ }
126
+ .modal-content2 {
127
+ background-color: #fefefe;
128
+ margin: 15% auto;
129
+ padding: 20px;
130
+ border: 1px solid #888;
131
+ width: 80%;
132
+ max-width: 600px;
133
+ position: relative;
134
+ }
135
+ .modal-image2 {
136
+ width: 100%;
137
+ max-width: 200px;
138
+ height: auto;
139
+ display: block;
140
+ margin: 0 auto;
141
+ }
142
+
98
143
  ```
99
144
 
100
145
  ```modal.js
146
+
101
147
  document.addEventListener('DOMContentLoaded', () => {
102
148
  const modal = document.getElementById('myModal');
103
149
  const img = document.getElementById('mainImage');
@@ -144,4 +190,5 @@
144
190
 
145
191
 
146
192
  ### 補足
147
- 特になし
193
+ 追記
194
+ 画像が複数あるverに直しました。
モーダルダイアログJavaScriptHTMLCSS