質問編集履歴

2

誤字

2021/08/18 04:38

投稿

keisukekusaka
keisukekusaka

スコア1

test CHANGED
File without changes
test CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  jQueryでポップアップウィンドウの実装を試みていますが、できません。
16
16
 
17
- (複数の画像があり、それぞれの順番をjQueryで取得して、同じ順番のモーダルウィンドウを表示したい。)
17
+ (複数の画像があり、それぞれの順番をjQueryで取得して、同じ順番のポップアップウィンドウを表示したい。)
18
18
 
19
19
 
20
20
 

1

マークダウン記法の使用。モーダルウィンドウの概念の理解。文章の修正。

2021/08/18 04:38

投稿

keisukekusaka
keisukekusaka

スコア1

test CHANGED
@@ -1 +1 @@
1
- ・1ページに**複数ある**モーダルウィンドウを作りたい。
1
+ ・1ページに**複数ある**ポップアップウィンドウを作りたい。
test CHANGED
@@ -2,17 +2,17 @@
2
2
 
3
3
 
4
4
 
5
- ・1ページに**複数ある**モーダルウィンドウを作りたい。
5
+ ・1ページに**複数ある**ポップアップウィンドウを作りたい。
6
6
 
7
7
           ↓
8
8
 
9
- ・画像をクリックすると、モーダルウィンドウが現れて画像を大きく表示できるようにしたい。
9
+ ・画像をクリックすると、ポップアップウィンドウが現れて画像を大きく表示できるようにしたい。
10
-
11
-
12
-
13
-
14
-
10
+
11
+
12
+
13
+
14
+
15
- jQueryでモーダルウィンドウの実装を試みていますが、できません。
15
+ jQueryでポップアップウィンドウの実装を試みていますが、できません。
16
16
 
17
17
  (複数の画像があり、それぞれの順番をjQueryで取得して、同じ順番のモーダルウィンドウを表示したい。)
18
18
 
@@ -30,7 +30,11 @@
30
30
 
31
31
 
32
32
 
33
- id="openModal"の要素をクリックすると、
33
+ id="openModal"の要素をクリックすると、 var openModal = $(this).index();で
34
+
35
+ 何番目の#openModalかを取得して、$('.modalArea').eq(openModal).fadeIn();で
36
+
37
+ 同じ順番の.modalAreaがフェイドインするつもりがどうも動かない。
34
38
 
35
39
 
36
40
 
@@ -46,133 +50,135 @@
46
50
 
47
51
 
48
52
 
49
- **HTML**
53
+ ```html
54
+
55
+ <!-- クリックしたい画像要素(id="openModalがついているところをクリックしたい)ここから -->
56
+
57
+
58
+
59
+ <section id="works">
60
+
61
+
62
+
63
+ <h2 class="section-title">Works</h2>
64
+
65
+ <div class="works-flex">
66
+
67
+ <div class="works-item">
68
+
69
+ <div class="works-image-box" id="openModal"><img src="images/.png" alt=""></div>
70
+
71
+ <p class="works-title">(クラウドソーシング案件)</p>
72
+
73
+ <p class="works-cat">Design / Coding</p>
74
+
75
+ </div>
76
+
77
+ <div class="works-item">
78
+
79
+ <div class="works-image-box" id="openModal"><img src="images/.jpg" alt=""></div>
80
+
81
+ <p class="works-title">(架空サイト)</p>
82
+
83
+ <p class="works-cat">Design</p>
84
+
85
+ </div>
86
+
87
+ <div class="works-item">
88
+
89
+ <div class="works-image-box" id="openModal"><img src="images/.jpg" alt=""></div>
90
+
91
+ <p class="works-title">(架空サイト)</p>
92
+
93
+ <p class="works-cat">Design</p>
94
+
95
+ </div>
96
+
97
+ </div>
98
+
99
+ </section>
100
+
101
+
102
+
103
+      <!-- クリックしたい画像要素ここまで -->
104
+
105
+
106
+
107
+
108
+
109
+
110
+
111
+
112
+
113
+      <!-- モーダルエリアここから -->
114
+
115
+
116
+
117
+
118
+
119
+ <section id="modalArea" class="modalArea">
120
+
121
+ <div id="modalBg" class="modalBg"></div>
122
+
123
+ <div class="modalWrapper">
124
+
125
+ <div class="modalContents">
126
+
127
+ <img src="images/.jpg" alt="のアップ画像">
128
+
129
+ </div>
130
+
131
+ <div id="closeModal" class="closeModal">
132
+
133
+ ×
134
+
135
+ </div>
136
+
137
+ </div>
138
+
139
+ </section>
140
+
141
+ <section id="modalArea" class="modalArea">
142
+
143
+ <div id="modalBg" class="modalBg"></div>
144
+
145
+ <div class="modalWrapper">
146
+
147
+ <div class="modalContents">
148
+
149
+ <img src="images/.jpg" alt="のアップ画像">
150
+
151
+ </div>
152
+
153
+ <div id="closeModal" class="closeModal">
154
+
155
+ ×
156
+
157
+ </div>
158
+
159
+ </div>
160
+
161
+ </section>
162
+
163
+
164
+
165
+      <!-- モーダルエリアここまで -->
166
+
167
+
168
+
169
+ ```
50
170
 
51
171
       
52
172
 
53
-      <!-- クリックしたい画像要素(id="openModalがついているところをクリックしたい)ここから -->
173
+      
54
-
55
-
56
-
57
- <section id="works">
174
+
58
-
59
-
60
-
61
- <h2 class="section-title">Works</h2>
175
+
62
-
63
- <div class="works-flex">
176
+
64
-
65
- <div class="works-item">
177
+
66
-
67
- <div class="works-image-box" id="openModal"><img src="images/.png" alt=""></div>
178
+
68
-
69
- <p class="works-title">(クラウドソーシング案件)</p>
70
-
71
- <p class="works-cat">Design / Coding</p>
72
-
73
- </div>
74
-
75
- <div class="works-item">
76
-
77
- <div class="works-image-box" id="openModal"><img src="images/.jpg" alt=""></div>
78
-
79
- <p class="works-title">(架空サイト)</p>
80
-
81
- <p class="works-cat">Design</p>
82
-
83
- </div>
84
-
85
- <div class="works-item">
86
-
87
- <div class="works-image-box" id="openModal"><img src="images/.jpg" alt=""></div>
88
-
89
- <p class="works-title">(架空サイト)</p>
90
-
91
- <p class="works-cat">Design</p>
92
-
93
- </div>
94
-
95
- </div>
96
-
97
- </section>
98
-
99
-
100
-
101
-      <!-- クリックしたい画像要素ここまで -->
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
-
110
-
111
-      <!-- モーダルエリアここから -->
112
-
113
-
114
-
115
-
116
-
117
- <section id="modalArea" class="modalArea">
118
-
119
- <div id="modalBg" class="modalBg"></div>
120
-
121
- <div class="modalWrapper">
122
-
123
- <div class="modalContents">
124
-
125
- <img src="images/.jpg" alt="のアップ画像">
126
-
127
- </div>
128
-
129
- <div id="closeModal" class="closeModal">
130
-
131
- ×
132
-
133
- </div>
134
-
135
- </div>
136
-
137
- </section>
138
-
139
- <section id="modalArea" class="modalArea">
140
-
141
- <div id="modalBg" class="modalBg"></div>
142
-
143
- <div class="modalWrapper">
144
-
145
- <div class="modalContents">
146
-
147
- <img src="images/.jpg" alt="のアップ画像">
148
-
149
- </div>
150
-
151
- <div id="closeModal" class="closeModal">
152
-
153
- ×
154
-
155
- </div>
156
-
157
- </div>
158
-
159
- </section>
160
-
161
-
162
-
163
-      <!-- モーダルエリアここまで -->
164
-
165
-
166
-
167
-
168
-
169
- **CSS**
179
+ ```css
170
-
171
-
172
-
173
-
174
-
180
+
175
- /* モーダルCSS */
181
+ /* ポップアップCSS */
176
182
 
177
183
  .modalArea {
178
184
 
@@ -242,17 +248,13 @@
242
248
 
243
249
 
244
250
 
245
-
251
+ ```
246
-
252
+
253
+
254
+
247
- **jQuery**
255
+ ```jQuery
248
-
249
-
250
-
251
-
252
-
253
-
254
-
256
+
255
- // worksのモーダルウィンドウ
257
+ // worksのポップアップウィンドウ
256
258
 
257
259
 
258
260
 
@@ -260,11 +262,11 @@
260
262
 
261
263
  $('#openModal').click(function(){
262
264
 
263
- var btnIndex = $(this).index();
265
+ var openModal = $(this).index();
264
-
266
+
265
- //何番目のモーダルボタンかを取得
267
+ //何番目の#openModalかを取得
266
-
268
+
267
- $('.modalArea').eq(btnIndex).fadeIn();
269
+ $('.modalArea').eq(openModal).fadeIn();
268
270
 
269
271
  $('html, body').css('overflow', 'hidden');
270
272
 
@@ -284,6 +286,20 @@
284
286
 
285
287
 
286
288
 
289
+ ```
290
+
291
+
292
+
293
+
294
+
295
+
296
+
297
+
298
+
299
+
300
+
301
+
302
+
287
303
 
288
304
 
289
305
 
@@ -300,7 +316,7 @@
300
316
 
301
317
  一つ目の画像をクリックすると一つ目のモーダルウィンドウは出るのですが、
302
318
 
303
- 二つ目の画像をクリックしても反応ないし。(二つ目のモーダルウィンドウが出て欲しい)
319
+ 二つ目の画像をクリックしても反応ないし。(二つ目のポップアップウィンドウが出て欲しい)
304
320
 
305
321
 
306
322