###前提・実現したいこと
モーダルウィンドウ(ポップアップ)を表示させたいです。
同一のソースをページ内に複数個記述してるのですが、
一番最初に記述したソースしか反応しません。
html内にある下記のソースで2番目にあるのが反応しないので反応させたいです。
<!-- モーダル口コミ --> <?php require 'review.php'; ?> <?php require 'review.php'; ?>###発生している問題・エラーメッセージ
同一のソースをページ内に複数個記述してるのですが、 一番最初に記述したソースしか反応しません。 一番最初のソース以降の記述も反応するようにしたいです。
###該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5 <title>口臭撃退|爽快クリア</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 7 <link href="css/sp/new_style.css" rel="stylesheet" type="text/css" media="all"> 8</head> 9<body> 10<!-- Google Tag Manager (noscript) --> 11<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TK8RJM5" 12height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> 13<!-- End Google Tag Manager (noscript) --> 14<img src="image/sp/new_ver_k/renewal_001_001.jpg"> 15<img src="image/sp/new_ver_k/renewal_001_002.jpg"> 16<a href="<?php require './buy/buy-teiki.php'; ?>"> 17<img src="image/sp/new_ver_k/renewal_001_003.jpg" class="mt mb"></a> 18<img src="image/sp/new_ver_k/renewal_001_004.jpg"> 19<img src="image/sp/new_ver_k/renewal_001_005.jpg"> 20<img src="image/sp/new_ver_k/renewal_001_006.jpg"> 21<img src="image/sp/new_ver_k/renewal_001_007.jpg"> 22 23**この部分です** 24<!-- モーダル表示 --> 25<?php require 'review.php'; ?><!-- この部分に表示されるボタンはモーダルウィンドウ出ます --> 26<?php require 'review.php'; ?><!-- この部分に表示されるボタンはモーダルウィンドウ出ません。同じように他の位置にしても出せるようにしたい --> 27 28<img src="image/sp/new_ver_k/renewal_002_001.jpg"> 29<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 30<script src="js/sp/modal.js"></script> 31</body> 32</html>
css
1#modal-content { 2 width: 90% ; 3 margin: 0 ; 4 padding: 20px ; 5 background: #BCFAEE; 6 position: fixed ; 7 display: none ; 8 z-index: 2 ; 9font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; 10 11} 12 13#modal-content-innar{ 14 margin:0 auto; 15 width:100%; 16} 17 18#modal-overlay { 19 z-index: 1 ; 20 display: none ; 21 position: fixed ; 22 top: 0 ; 23 left: 0 ; 24 width: 100% ; 25 height: 120% ; 26 background-color: rgba( 0,0,0, 0.75 ) ; 27} 28 29.button-link { 30 color: #00f ; 31 text-decoration: underline ; 32} 33 34.button-link:hover { 35 cursor: pointer ; 36 color: #f00 ; 37} 38 39.custmaer-voice-wrap{ 40 overflow: scroll; 41 height: 400px; 42} 43 44.voice-area{ 45 background-color: white; 46 padding: 10px; 47 margin-bottom: 10px; 48} 49 50.voice-area p:first-child{ 51 border-left: 3px #BCFAEE solid; 52 border-bottom: 1px #BCFAEE solid; 53 padding-left: 5px; 54 margin-bottom: 5px; 55 font-size: 2.0rem; 56} 57 58.voice-area p:nth-child(even){ 59 font-size: 1.2rem; 60 color: orange; 61} 62 63.voice-area p:nth-child(even) span{ 64 display: inline-block; 65 border-radius: 3px; 66 background-color: orange; 67 color: white; 68 text-align: center; 69 padding: 1px 3px; 70 margin-right: 3px; 71} 72 73.voice-area p:last-child{ 74 margin-top: 10px; 75 font-size: 1.7rem; 76} 77 78.close{ 79 margin-top: 15px; 80}
php
1<div id="orver" class="mt mb"> 2 <div id="wrap"> 3 <div id="contents"> 4<!-- モーダルウィンドウボタン --> 5 <a id="modal-open" class="button-link"><img src="image/sp/new_ver_k/renewal_001_007-08.jpg"></a> 6 </div> 7 </div> 8</div> 9<div id="modal-content"> 10 <div id="modal-content-innar"> 11 <div class="custmaer-voice-wrap"> 12 <div class="voice-area"> 13 <p>aaaa</p> 14 <p>bbbb</p> 15 <p>cccc</p> 16 </div> 17 <div class="voice-area"> 18 <p>aaaa</p> 19 <p>bbbb</p> 20 <p>cccc</p> 21 </div> 22 </div> 23<p class="close"><a id="modal-close" class="button-link"><img src="image/sp/new_ver_k/modal-close.png"></a></p> 24<!-- モーダルウィンドウ閉じるボタン --> 25</div> 26</div>
javascript
1var pointY; 2$(function(){ 3 $("#modal-open").click(function(){ 4 //キーボード操作などにより、オーバーレイが多重起動するのを防止する 5 $( this ).blur() ; //ボタンからフォーカスを外す 6 if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1) 7 //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2) 8 9 //背景固定 10 pointY = $(window).scrollTop(); 11 $('body').css({ 12 'position': 'fixed', 13 'width': '100%', 14 'top': -pointY 15 }); 16 17 //オーバーレイを出現させる 18 $( "body" ).append( '<div id="modal-overlay"></div>' ) ; 19 20 $( "#modal-overlay" ).fadeIn( "slow" ) ; 21 22 //コンテンツをセンタリングする 23 centeringModalSyncer() ; 24 25 //コンテンツをフェードインする 26 $( "#modal-content" ).fadeIn( "slow" ) ; 27 28 //[#modal-overlay]、または[#modal-close]をクリックしたら… 29 $( "#modal-overlay,#modal-close" ).unbind().click( function(){ 30 31 //[#modal-content]と[#modal-overlay]をフェードアウトした後に… 32 $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){ 33 34 //[#modal-overlay]を削除する 35 $('#modal-overlay').remove() ; 36 37 //背景固定を解除する 38 releaseScrolling(); 39 } ) ; 40 41 } ) ; 42 43 } ) ; 44//背景固定解除 45function releaseScrolling(){ 46 $('body').css({ 47 'position': 'relative', 48 'width': '', 49 'top': '' 50 }); 51 $(window).scrollTop(pointY); 52} 53 54 //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する 55 $( window ).resize( centeringModalSyncer ) ; 56 57 //センタリングを実行する関数 58 function centeringModalSyncer() { 59 60 //画面(ウィンドウ)の幅、高さを取得 61 var w = $( window ).width() ; 62 var h = $( window ).height() ; 63 64 // コンテンツ(#modal-content2)の幅、高さを取得 65 // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。 66 var cw = $( "#modal-content" ).outerWidth( {margin:true} ); 67 var ch = $( "#modal-content" ).outerHeight( {margin:true} ); 68 var cw = $( "#modal-content" ).outerWidth(); 69 var ch = $( "#modal-content" ).outerHeight(); 70 71 //センタリングを実行する 72 $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ; 73 74 } 75 76} ) ;
###試したこと
<?php require 'review.php'; ?>で読み込まず、外部ファイルreview.phpの内容を全部htmlに入れたのですが、これでも一番最初しかモーダルウィンドウは出ませんでした。
拙い技術と質問で申し訳ありません。
よろしくお願いいたします。
###補足情報(言語/FW/ツール等のバージョンなど)
回答2件
あなたの回答
tips
プレビュー