質問編集履歴

2

実現したことのテキスト変更

2017/05/12 05:37

投稿

tantalus
tantalus

スコア16

test CHANGED
File without changes
test CHANGED
@@ -8,482 +8,492 @@
8
8
 
9
9
 
10
10
 
11
+ html内にある下記のソースで2番目にあるのが反応しないので反応させたいです。
12
+
13
+
14
+
15
+ <!-- モーダル口コミ -->
16
+
17
+ <?php require 'review.php'; ?>
18
+
19
+ <?php require 'review.php'; ?>
20
+
21
+
22
+
23
+
24
+
25
+ ###発生している問題・エラーメッセージ
26
+
27
+
28
+
29
+ ```
30
+
31
+ 同一のソースをページ内に複数個記述してるのですが、
32
+
33
+ 一番最初に記述したソースしか反応しません。
34
+
35
+
36
+
11
37
  一番最初のソース以降の記述も反応するようにしたいです。
12
38
 
13
-
14
-
15
- ###発生している問題・エラーメッセージ
16
-
17
-
18
-
19
39
  ```
20
40
 
41
+
42
+
21
- 同一のソースをペジ内に複数個記述してるのですが、
43
+ ###該当のソース
44
+
22
-
45
+ ```HTML
46
+
23
- 一番最初に記述したソースしか反応しません。
47
+ <!DOCTYPE html>
24
-
25
-
26
-
48
+
27
- 一番最初のソース以降の記述も反応するようにしたいです。
49
+ <html lang="ja">
50
+
51
+ <head>
52
+
53
+ <meta charset="UTF-8">
54
+
55
+ <title>口臭撃退|爽快クリア</title>
56
+
57
+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
58
+
59
+ <link href="css/sp/new_style.css" rel="stylesheet" type="text/css" media="all">
60
+
61
+ </head>
62
+
63
+ <body>
64
+
65
+ <!-- Google Tag Manager (noscript) -->
66
+
67
+ <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TK8RJM5"
68
+
69
+ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
70
+
71
+ <!-- End Google Tag Manager (noscript) -->
72
+
73
+ <img src="image/sp/new_ver_k/renewal_001_001.jpg">
74
+
75
+ <img src="image/sp/new_ver_k/renewal_001_002.jpg">
76
+
77
+ <a href="<?php require './buy/buy-teiki.php'; ?>">
78
+
79
+ <img src="image/sp/new_ver_k/renewal_001_003.jpg" class="mt mb"></a>
80
+
81
+ <img src="image/sp/new_ver_k/renewal_001_004.jpg">
82
+
83
+ <img src="image/sp/new_ver_k/renewal_001_005.jpg">
84
+
85
+ <img src="image/sp/new_ver_k/renewal_001_006.jpg">
86
+
87
+ <img src="image/sp/new_ver_k/renewal_001_007.jpg">
88
+
89
+
90
+
91
+ **この部分です**
92
+
93
+ <!-- モーダル表示 -->
94
+
95
+ <?php require 'review.php'; ?><!-- この部分に表示されるボタンはモーダルウィンドウ出ます -->
96
+
97
+ <?php require 'review.php'; ?><!-- この部分に表示されるボタンはモーダルウィンドウ出ません。同じように他の位置にしても出せるようにしたい -->
98
+
99
+
100
+
101
+ <img src="image/sp/new_ver_k/renewal_002_001.jpg">
102
+
103
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
104
+
105
+ <script src="js/sp/modal.js"></script>
106
+
107
+ </body>
108
+
109
+ </html>
28
110
 
29
111
  ```
30
112
 
31
113
 
32
114
 
33
- ###該当のソースコード
34
-
35
- ```HTML
36
-
37
- <!DOCTYPE html>
38
-
39
- <html lang="ja">
40
-
41
- <head>
42
-
43
- <meta charset="UTF-8">
44
-
45
- <title>口臭撃退|爽快クリア</title>
46
-
47
- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
48
-
49
- <link href="css/sp/new_style.css" rel="stylesheet" type="text/css" media="all">
50
-
51
- </head>
52
-
53
- <body>
54
-
55
- <!-- Google Tag Manager (noscript) -->
56
-
57
- <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TK8RJM5"
58
-
59
- height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
60
-
61
- <!-- End Google Tag Manager (noscript) -->
62
-
63
- <img src="image/sp/new_ver_k/renewal_001_001.jpg">
64
-
65
- <img src="image/sp/new_ver_k/renewal_001_002.jpg">
66
-
67
- <a href="<?php require './buy/buy-teiki.php'; ?>">
68
-
69
- <img src="image/sp/new_ver_k/renewal_001_003.jpg" class="mt mb"></a>
70
-
71
- <img src="image/sp/new_ver_k/renewal_001_004.jpg">
72
-
73
- <img src="image/sp/new_ver_k/renewal_001_005.jpg">
74
-
75
- <img src="image/sp/new_ver_k/renewal_001_006.jpg">
76
-
77
- <img src="image/sp/new_ver_k/renewal_001_007.jpg">
78
-
79
-
80
-
81
- **この部分です**
82
-
83
- <!-- モーダル表示 -->
84
-
85
- <?php require 'review.php'; ?><!-- この部分に表示されるボタンはモーダルウィンドウ出ます -->
86
-
87
- <?php require 'review.php'; ?><!-- この部分に表示されるボタンはモーダルウィンドウ出ません。同じように他の位置にしても出せるようにしたい -->
88
-
89
-
90
-
91
- <img src="image/sp/new_ver_k/renewal_002_001.jpg">
92
-
93
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
94
-
95
- <script src="js/sp/modal.js"></script>
96
-
97
- </body>
98
-
99
- </html>
115
+ ```css
116
+
117
+ #modal-content {
118
+
119
+ width: 90% ;
120
+
121
+ margin: 0 ;
122
+
123
+ padding: 20px ;
124
+
125
+ background: #BCFAEE;
126
+
127
+ position: fixed ;
128
+
129
+ display: none ;
130
+
131
+ z-index: 2 ;
132
+
133
+ font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
134
+
135
+
136
+
137
+ }
138
+
139
+
140
+
141
+ #modal-content-innar{
142
+
143
+ margin:0 auto;
144
+
145
+ width:100%;
146
+
147
+ }
148
+
149
+
150
+
151
+ #modal-overlay {
152
+
153
+ z-index: 1 ;
154
+
155
+ display: none ;
156
+
157
+ position: fixed ;
158
+
159
+ top: 0 ;
160
+
161
+ left: 0 ;
162
+
163
+ width: 100% ;
164
+
165
+ height: 120% ;
166
+
167
+ background-color: rgba( 0,0,0, 0.75 ) ;
168
+
169
+ }
170
+
171
+
172
+
173
+ .button-link {
174
+
175
+ color: #00f ;
176
+
177
+ text-decoration: underline ;
178
+
179
+ }
180
+
181
+
182
+
183
+ .button-link:hover {
184
+
185
+ cursor: pointer ;
186
+
187
+ color: #f00 ;
188
+
189
+ }
190
+
191
+
192
+
193
+ .custmaer-voice-wrap{
194
+
195
+ overflow: scroll;
196
+
197
+ height: 400px;
198
+
199
+ }
200
+
201
+
202
+
203
+ .voice-area{
204
+
205
+ background-color: white;
206
+
207
+ padding: 10px;
208
+
209
+ margin-bottom: 10px;
210
+
211
+ }
212
+
213
+
214
+
215
+ .voice-area p:first-child{
216
+
217
+ border-left: 3px #BCFAEE solid;
218
+
219
+ border-bottom: 1px #BCFAEE solid;
220
+
221
+ padding-left: 5px;
222
+
223
+ margin-bottom: 5px;
224
+
225
+ font-size: 2.0rem;
226
+
227
+ }
228
+
229
+
230
+
231
+ .voice-area p:nth-child(even){
232
+
233
+ font-size: 1.2rem;
234
+
235
+ color: orange;
236
+
237
+ }
238
+
239
+
240
+
241
+ .voice-area p:nth-child(even) span{
242
+
243
+ display: inline-block;
244
+
245
+ border-radius: 3px;
246
+
247
+ background-color: orange;
248
+
249
+ color: white;
250
+
251
+ text-align: center;
252
+
253
+ padding: 1px 3px;
254
+
255
+ margin-right: 3px;
256
+
257
+ }
258
+
259
+
260
+
261
+ .voice-area p:last-child{
262
+
263
+ margin-top: 10px;
264
+
265
+ font-size: 1.7rem;
266
+
267
+ }
268
+
269
+
270
+
271
+ .close{
272
+
273
+ margin-top: 15px;
274
+
275
+ }
100
276
 
101
277
  ```
102
278
 
103
279
 
104
280
 
105
- ```css
106
-
107
- #modal-content {
108
-
109
- width: 90% ;
110
-
111
- margin: 0 ;
112
-
113
- padding: 20px ;
114
-
115
- background: #BCFAEE;
116
-
117
- position: fixed ;
118
-
119
- display: none ;
120
-
121
- z-index: 2 ;
122
-
123
- font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
124
-
125
-
126
-
127
- }
128
-
129
-
130
-
131
- #modal-content-innar{
132
-
133
- margin:0 auto;
134
-
135
- width:100%;
136
-
137
- }
138
-
139
-
140
-
141
- #modal-overlay {
142
-
143
- z-index: 1 ;
144
-
145
- display: none ;
146
-
147
- position: fixed ;
148
-
149
- top: 0 ;
150
-
151
- left: 0 ;
152
-
153
- width: 100% ;
154
-
155
- height: 120% ;
156
-
157
- background-color: rgba( 0,0,0, 0.75 ) ;
158
-
159
- }
160
-
161
-
162
-
163
- .button-link {
164
-
165
- color: #00f ;
166
-
167
- text-decoration: underline ;
168
-
169
- }
170
-
171
-
172
-
173
- .button-link:hover {
174
-
175
- cursor: pointer ;
176
-
177
- color: #f00 ;
178
-
179
- }
180
-
181
-
182
-
183
- .custmaer-voice-wrap{
184
-
185
- overflow: scroll;
186
-
187
- height: 400px;
188
-
189
- }
190
-
191
-
192
-
193
- .voice-area{
194
-
195
- background-color: white;
196
-
197
- padding: 10px;
198
-
199
- margin-bottom: 10px;
200
-
201
- }
202
-
203
-
204
-
205
- .voice-area p:first-child{
206
-
207
- border-left: 3px #BCFAEE solid;
208
-
209
- border-bottom: 1px #BCFAEE solid;
210
-
211
- padding-left: 5px;
212
-
213
- margin-bottom: 5px;
214
-
215
- font-size: 2.0rem;
216
-
217
- }
218
-
219
-
220
-
221
- .voice-area p:nth-child(even){
222
-
223
- font-size: 1.2rem;
224
-
225
- color: orange;
226
-
227
- }
228
-
229
-
230
-
231
- .voice-area p:nth-child(even) span{
232
-
233
- display: inline-block;
234
-
235
- border-radius: 3px;
236
-
237
- background-color: orange;
238
-
239
- color: white;
240
-
241
- text-align: center;
242
-
243
- padding: 1px 3px;
244
-
245
- margin-right: 3px;
246
-
247
- }
248
-
249
-
250
-
251
- .voice-area p:last-child{
252
-
253
- margin-top: 10px;
254
-
255
- font-size: 1.7rem;
256
-
257
- }
258
-
259
-
260
-
261
- .close{
262
-
263
- margin-top: 15px;
264
-
265
- }
281
+ ```php
282
+
283
+ <div id="orver" class="mt mb">
284
+
285
+ <div id="wrap">
286
+
287
+ <div id="contents">
288
+
289
+ <!-- モーダルウィンドウボタン -->
290
+
291
+ <a id="modal-open" class="button-link"><img src="image/sp/new_ver_k/renewal_001_007-08.jpg"></a>
292
+
293
+ </div>
294
+
295
+ </div>
296
+
297
+ </div>
298
+
299
+ <div id="modal-content">
300
+
301
+ <div id="modal-content-innar">
302
+
303
+ <div class="custmaer-voice-wrap">
304
+
305
+ <div class="voice-area">
306
+
307
+ <p>aaaa</p>
308
+
309
+ <p>bbbb</p>
310
+
311
+ <p>cccc</p>
312
+
313
+ </div>
314
+
315
+ <div class="voice-area">
316
+
317
+ <p>aaaa</p>
318
+
319
+ <p>bbbb</p>
320
+
321
+ <p>cccc</p>
322
+
323
+ </div>
324
+
325
+ </div>
326
+
327
+ <p class="close"><a id="modal-close" class="button-link"><img src="image/sp/new_ver_k/modal-close.png"></a></p>
328
+
329
+ <!-- モーダルウィンドウ閉じるボタン -->
330
+
331
+ </div>
332
+
333
+ </div>
266
334
 
267
335
  ```
268
336
 
269
337
 
270
338
 
271
- ```php
272
-
273
- <div id="orver" class="mt mb">
274
-
275
- <div id="wrap">
276
-
277
- <div id="contents">
278
-
279
- <!-- モダルウィンウボタン -->
280
-
281
- <a id="modal-open" class="button-link"><img src="image/sp/new_ver_k/renewal_001_007-08.jpg"></a>
282
-
283
- </div>
284
-
285
- </div>
286
-
287
- </div>
288
-
289
- <div id="modal-content">
290
-
291
- <div id="modal-content-innar">
292
-
293
- <div class="custmaer-voice-wrap">
294
-
295
- <div class="voice-area">
296
-
297
- <p>aaaa</p>
298
-
299
- <p>bbbb</p>
300
-
301
- <p>cccc</p>
302
-
303
- </div>
304
-
305
- <div class="voice-area">
306
-
307
- <p>aaaa</p>
308
-
309
- <p>bbbb</p>
310
-
311
- <p>cccc</p>
312
-
313
- </div>
314
-
315
- </div>
316
-
317
- <p class="close"><a id="modal-close" class="button-link"><img src="image/sp/new_ver_k/modal-close.png"></a></p>
318
-
319
- <!-- モーダルウィンドウ閉じるボタン -->
320
-
321
- </div>
322
-
323
- </div>
339
+ ```javascript
340
+
341
+ var pointY;
342
+
343
+ $(function(){
344
+
345
+ $("#modal-open").click(function(){
346
+
347
+ //キボー操作などにより、オーバーレイが多重起動するのを防止する
348
+
349
+ $( this ).blur() ; //ボタンからフォーカスを外す
350
+
351
+ if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1)
352
+
353
+ //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2)
354
+
355
+
356
+
357
+ //背景固定
358
+
359
+ pointY = $(window).scrollTop();
360
+
361
+ $('body').css({
362
+
363
+ 'position': 'fixed',
364
+
365
+ 'width': '100%',
366
+
367
+ 'top': -pointY
368
+
369
+ });
370
+
371
+
372
+
373
+ //オーバーレイを出現させる
374
+
375
+ $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
376
+
377
+
378
+
379
+ $( "#modal-overlay" ).fadeIn( "slow" ) ;
380
+
381
+
382
+
383
+ //コンテンツをセンタリングする
384
+
385
+ centeringModalSyncer() ;
386
+
387
+
388
+
389
+ //コンテンツをフェードインする
390
+
391
+ $( "#modal-content" ).fadeIn( "slow" ) ;
392
+
393
+
394
+
395
+ //[#modal-overlay]、または[#modal-close]をクリックしたら…
396
+
397
+ $( "#modal-overlay,#modal-close" ).unbind().click( function(){
398
+
399
+
400
+
401
+ //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
402
+
403
+ $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
404
+
405
+
406
+
407
+ //[#modal-overlay]を削除する
408
+
409
+ $('#modal-overlay').remove() ;
410
+
411
+
412
+
413
+ //背景固定を解除する
414
+
415
+ releaseScrolling();
416
+
417
+ } ) ;
418
+
419
+
420
+
421
+ } ) ;
422
+
423
+
424
+
425
+ } ) ;
426
+
427
+ //背景固定解除
428
+
429
+ function releaseScrolling(){
430
+
431
+ $('body').css({
432
+
433
+ 'position': 'relative',
434
+
435
+ 'width': '',
436
+
437
+ 'top': ''
438
+
439
+ });
440
+
441
+ $(window).scrollTop(pointY);
442
+
443
+ }
444
+
445
+
446
+
447
+ //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
448
+
449
+ $( window ).resize( centeringModalSyncer ) ;
450
+
451
+
452
+
453
+ //センタリングを実行する関数
454
+
455
+ function centeringModalSyncer() {
456
+
457
+
458
+
459
+ //画面(ウィンドウ)の幅、高さを取得
460
+
461
+ var w = $( window ).width() ;
462
+
463
+ var h = $( window ).height() ;
464
+
465
+
466
+
467
+ // コンテンツ(#modal-content2)の幅、高さを取得
468
+
469
+ // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
470
+
471
+ var cw = $( "#modal-content" ).outerWidth( {margin:true} );
472
+
473
+ var ch = $( "#modal-content" ).outerHeight( {margin:true} );
474
+
475
+ var cw = $( "#modal-content" ).outerWidth();
476
+
477
+ var ch = $( "#modal-content" ).outerHeight();
478
+
479
+
480
+
481
+ //センタリングを実行する
482
+
483
+ $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
484
+
485
+
486
+
487
+ }
488
+
489
+
490
+
491
+ } ) ;
324
492
 
325
493
  ```
326
494
 
327
495
 
328
496
 
329
- ```javascript
330
-
331
- var pointY;
332
-
333
- $(function(){
334
-
335
- $("#modal-open").click(function(){
336
-
337
- //キーボード操作などにより、オーバーレイが多重起動するのを防止する
338
-
339
- $( this ).blur() ; //ボタンからフォーカスを外す
340
-
341
- if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1)
342
-
343
- //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2)
344
-
345
-
346
-
347
- //背景固定
348
-
349
- pointY = $(window).scrollTop();
350
-
351
- $('body').css({
352
-
353
- 'position': 'fixed',
354
-
355
- 'width': '100%',
356
-
357
- 'top': -pointY
358
-
359
- });
360
-
361
-
362
-
363
- //オーバーレイを出現させる
364
-
365
- $( "body" ).append( '<div id="modal-overlay"></div>' ) ;
366
-
367
-
368
-
369
- $( "#modal-overlay" ).fadeIn( "slow" ) ;
370
-
371
-
372
-
373
- //コンテンツをセンタリングする
374
-
375
- centeringModalSyncer() ;
376
-
377
-
378
-
379
- //コンテンツをフェードインする
380
-
381
- $( "#modal-content" ).fadeIn( "slow" ) ;
382
-
383
-
384
-
385
- //[#modal-overlay]、または[#modal-close]をクリックしたら…
386
-
387
- $( "#modal-overlay,#modal-close" ).unbind().click( function(){
388
-
389
-
390
-
391
- //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
392
-
393
- $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){
394
-
395
-
396
-
397
- //[#modal-overlay]を削除する
398
-
399
- $('#modal-overlay').remove() ;
400
-
401
-
402
-
403
- //背景固定を解除する
404
-
405
- releaseScrolling();
406
-
407
- } ) ;
408
-
409
-
410
-
411
- } ) ;
412
-
413
-
414
-
415
- } ) ;
416
-
417
- //背景固定解除
418
-
419
- function releaseScrolling(){
420
-
421
- $('body').css({
422
-
423
- 'position': 'relative',
424
-
425
- 'width': '',
426
-
427
- 'top': ''
428
-
429
- });
430
-
431
- $(window).scrollTop(pointY);
432
-
433
- }
434
-
435
-
436
-
437
- //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
438
-
439
- $( window ).resize( centeringModalSyncer ) ;
440
-
441
-
442
-
443
- //センタリングを実行する関数
444
-
445
- function centeringModalSyncer() {
446
-
447
-
448
-
449
- //画面(ウィンドウ)の幅、高さを取得
450
-
451
- var w = $( window ).width() ;
452
-
453
- var h = $( window ).height() ;
454
-
455
-
456
-
457
- // コンテンツ(#modal-content2)の幅、高さを取得
458
-
459
- // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
460
-
461
- var cw = $( "#modal-content" ).outerWidth( {margin:true} );
462
-
463
- var ch = $( "#modal-content" ).outerHeight( {margin:true} );
464
-
465
- var cw = $( "#modal-content" ).outerWidth();
466
-
467
- var ch = $( "#modal-content" ).outerHeight();
468
-
469
-
470
-
471
- //センタリングを実行する
472
-
473
- $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;
474
-
475
-
476
-
477
- }
478
-
479
-
480
-
481
- } ) ;
482
-
483
- ```
484
-
485
-
486
-
487
497
  ###試したこと
488
498
 
489
499
  <?php require 'review.php'; ?>で読み込まず、外部ファイルreview.phpの内容を全部htmlに入れたのですが、

1

教えてもらいたい質問の仕方を変えました。

2017/05/12 05:37

投稿

tantalus
tantalus

スコア16

test CHANGED
@@ -1 +1 @@
1
- モーダルウィンドウをページ内にいくつか表示できるようにしたいです。
1
+ モーダルウィンドウ(ポップアップ)の設定
test CHANGED
@@ -1,10 +1,14 @@
1
1
  ###前提・実現したいこと
2
2
 
3
- モーダルウィンドウをページ内にいくつか表示させるようにしたいです。
3
+ モーダルウィンドウ(ポップアップ)を表示させたいです。
4
+
4
-
5
+ 同一のソースをページ内に複数個記述してるのですが、
6
+
7
+ 一番最初に記述したソースしか反応しません。
8
+
9
+
10
+
5
- か皆様のお力添えをいただけましたら幸いです。
11
+ 一番最初のソース以降の記述も反応するよしたいです。
6
-
7
- 何卒よろしくお願いいたします。
8
12
 
9
13
 
10
14
 
@@ -14,15 +18,13 @@
14
18
 
15
19
  ```
16
20
 
17
- ボタンクリックしたらモダルウィンドウが出るは出るのですが、
21
+ 同一のソースジ内複数個記述してるのですが、
18
-
22
+
19
- 1つのボタン(一番上)にしか反応せず、
23
+ 一番最初記述たソースしか反応しまん。
20
-
21
- 同じように記述しているほかのボタンをクリックしてもウインドウは開きません。
24
+
22
-
23
-
24
-
25
+
26
+
25
- 全てダルウィンドウを出したいボタンに反応させたいです。
27
+ 一番最初ス以降の記述も反応するようにしたいです。
26
28
 
27
29
  ```
28
30
 
@@ -76,6 +78,8 @@
76
78
 
77
79
 
78
80
 
81
+ **この部分です**
82
+
79
83
  <!-- モーダル表示 -->
80
84
 
81
85
  <?php require 'review.php'; ?><!-- この部分に表示されるボタンはモーダルウィンドウ出ます -->