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

編集履歴

質問編集履歴

4

コード修正

2024/09/04 23:45

投稿

kroos
kroos

スコア1

title CHANGED
File without changes
body 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>
@@ -199,4 +199,6 @@
199
199
  (写真1にはモーダルウィンドウ1、
200
200
  写真2にはモーダルウィンドウ2・・・)
201
201
 
202
- ③画像が複数あるverに直しました。
202
+ ③画像が複数あるverに直しました。
203
+
204
+ ④idを修正しました。
モーダルダイアログJavaScriptHTMLCSS

3

追記

2024/09/04 22:41

投稿

kroos
kroos

スコア1

title CHANGED
@@ -1,1 +1,1 @@
1
- モーダルウィンドウの実装について
1
+ 画像クリックで表示されるモーダルウィンドウを複数作りたい
body 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

title CHANGED
File without changes
body 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

title CHANGED
File without changes
body 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,23 +31,34 @@
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">
40
41
  <p>任意の文章</p>
41
42
  </div>
42
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">
52
+ <p>任意の文章</p>
53
+ </div>
54
+ </div><br>
43
55
  <script src="modal.js"></script>
44
56
  </body>
45
57
 
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,47 @@
60
72
  cursor: pointer;
61
73
  }
62
74
 
75
+ .clickable-image1 {
76
+ width: 100%;
77
+ max-width: 500px;
78
+ height: auto;
79
+ cursor: pointer;
80
+ }
81
+ .modal1 {
82
+ display: none;
83
+ position: fixed;
84
+ z-index: 1;
85
+ left: 0;
86
+ top: 0;
87
+ width: 100%;
88
+ height: 100%;
89
+ overflow: auto;
90
+ background-color: rgba(0,0,0,0.4);
91
+ }
92
+ .modal-content1 {
93
+ background-color: #fefefe;
94
+ margin: 15% auto;
95
+ padding: 20px;
96
+ border: 1px solid #888;
97
+ width: 80%;
98
+ max-width: 600px;
99
+ position: relative;
100
+ }
101
+ .modal-image1 {
102
+ width: 100%;
103
+ max-width: 200px;
104
+ height: auto;
105
+ display: block;
106
+ margin: 0 auto;
107
+ }
63
108
 
64
-
65
- .clickable-image {
109
+ .clickable-image2 {
66
110
  width: 100%;
67
111
  max-width: 500px;
68
112
  height: auto;
69
113
  cursor: pointer;
70
114
  }
71
- .modal {
115
+ .modal2 {
72
116
  display: none;
73
117
  position: fixed;
74
118
  z-index: 1;
@@ -79,7 +123,7 @@
79
123
  overflow: auto;
80
124
  background-color: rgba(0,0,0,0.4);
81
125
  }
82
- .modal-content {
126
+ .modal-content2 {
83
127
  background-color: #fefefe;
84
128
  margin: 15% auto;
85
129
  padding: 20px;
@@ -88,16 +132,18 @@
88
132
  max-width: 600px;
89
133
  position: relative;
90
134
  }
91
- .modal-image {
135
+ .modal-image2 {
92
136
  width: 100%;
93
137
  max-width: 200px;
94
138
  height: auto;
95
139
  display: block;
96
140
  margin: 0 auto;
97
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