質問編集履歴
2
誤字
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
jQueryでポップアップウィンドウの実装を試みていますが、できません。
|
|
9
|
-
（複数の画像があり、それぞれの順番をjQueryで取得して、同じ順番の
|
|
9
|
+
（複数の画像があり、それぞれの順番をjQueryで取得して、同じ順番のポップアップウィンドウを表示したい。）
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
詳細
|
1
マークダウン記法の使用。モーダルウィンドウの概念の理解。文章の修正。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
・１ページに**複数ある**
|
|
1
|
+
・１ページに**複数ある**ポップアップウィンドウを作りたい。
|
body
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
|
-
・１ページに**複数ある**
|
|
3
|
+
・１ページに**複数ある**ポップアップウィンドウを作りたい。
|
|
4
4
|
↓
|
|
5
|
-
・画像をクリックすると、
|
|
5
|
+
・画像をクリックすると、ポップアップウィンドウが現れて画像を大きく表示できるようにしたい。
|
|
6
6
|
|
|
7
7
|
|
|
8
|
-
jQueryで
|
|
8
|
+
jQueryでポップアップウィンドウの実装を試みていますが、できません。
|
|
9
9
|
（複数の画像があり、それぞれの順番をjQueryで取得して、同じ順番のモーダルウィンドウを表示したい。）
|
|
10
10
|
|
|
11
11
|
|
|
@@ -14,7 +14,9 @@
|
|
|
14
14
|
|
|
15
15
|
class="works-image-box"がついている要素にid="openModal"をつけた。
|
|
16
16
|
|
|
17
|
-
id="openModal"の要素をクリックすると、
|
|
17
|
+
id="openModal"の要素をクリックすると、 var openModal = $(this).index();で
|
|
18
|
+
何番目の#openModalかを取得して、$('.modalArea').eq(openModal).fadeIn();で
|
|
19
|
+
同じ順番の.modalAreaがフェイドインするつもりがどうも動かない。
|
|
18
20
|
|
|
19
21
|
### 発生している問題・エラーメッセージ
|
|
20
22
|
|
|
@@ -22,9 +24,8 @@
|
|
|
22
24
|
|
|
23
25
|
### 該当のソースコード
|
|
24
26
|
|
|
25
|
-
|
|
27
|
+
```html
|
|
26
|
-
|
|
27
|
-
|
|
28
|
+
<!-- クリックしたい画像要素（id="openModalがついているところをクリックしたい）ここから -->
|
|
28
29
|
|
|
29
30
|
<section id="works">
|
|
30
31
|
|
|
@@ -81,11 +82,13 @@
|
|
|
81
82
|
|
|
82
83
|
<!-- モーダルエリアここまで -->
|
|
83
84
|
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
|
|
84
88
|
|
|
85
|
-
**CSS**
|
|
86
89
|
|
|
87
|
-
|
|
90
|
+
```css
|
|
88
|
-
/*
|
|
91
|
+
/* ポップアップCSS */
|
|
89
92
|
.modalArea {
|
|
90
93
|
display: none;
|
|
91
94
|
position: fixed;
|
|
@@ -120,18 +123,16 @@
|
|
|
120
123
|
cursor: pointer;
|
|
121
124
|
}
|
|
122
125
|
|
|
126
|
+
```
|
|
123
127
|
|
|
124
|
-
|
|
128
|
+
```jQuery
|
|
129
|
+
// worksのポップアップウィンドウ
|
|
125
130
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
// worksのモーダルウィンドウ
|
|
129
|
-
|
|
130
131
|
$(function () {
|
|
131
132
|
$('#openModal').click(function(){
|
|
132
|
-
var
|
|
133
|
+
var openModal = $(this).index();
|
|
133
|
-
//何番目の
|
|
134
|
+
//何番目の#openModalかを取得
|
|
134
|
-
$('.modalArea').eq(
|
|
135
|
+
$('.modalArea').eq(openModal).fadeIn();
|
|
135
136
|
$('html, body').css('overflow', 'hidden');
|
|
136
137
|
});
|
|
137
138
|
|
|
@@ -141,15 +142,22 @@
|
|
|
141
142
|
});
|
|
142
143
|
});
|
|
143
144
|
|
|
145
|
+
```
|
|
144
146
|
|
|
145
147
|
|
|
146
148
|
|
|
147
149
|
|
|
148
150
|
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
149
157
|
### 試したこと
|
|
150
158
|
|
|
151
159
|
一つ目の画像をクリックすると一つ目のモーダルウィンドウは出るのですが、
|
|
152
|
-
二つ目の画像をクリックしても反応ないし。（二つ目の
|
|
160
|
+
二つ目の画像をクリックしても反応ないし。（二つ目のポップアップウィンドウが出て欲しい）
|
|
153
161
|
|
|
154
162
|
散々悩んであれこれしてみたが、どうもうまくいきません。
|
|
155
163
|
詳しい方、ご回答のほどよろしくお願いいたします。
|