質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

11265閲覧

モーダルウィンドウ(ポップアップ)の設定

tantalus

総合スコア16

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/12 04:04

編集2017/05/12 05:37

###前提・実現したいこと
モーダルウィンドウ(ポップアップ)を表示させたいです。
同一のソースをページ内に複数個記述してるのですが、
一番最初に記述したソースしか反応しません。

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/ツール等のバージョンなど)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/05/12 04:14

モーダルなのですよね? であれば複数出るというのは どういうことですか?
tantalus

2017/05/12 04:22

SurferOnWww様 ご連絡ありがとうございます。また、説明不足で申し訳ありません。現在ランディングページを制作していて、その中に参照テキストを表示したい個所がいくつかありまして、その参照テキストを表示させるボタンをモーダルウィンドウにしています。一番最初に表示させている参照テキストボタンのモーダルウィンドウは出るのですが、それ以降の参照テキストボタンからモーダルウィンドウが出ないということです。質問にしっかりとお答えできていますでしょうか?説明が下手で申し訳ありません。
退会済みユーザー

退会済みユーザー

2017/05/12 04:43

質問者さんが「モーダル」という言葉をどういう意味で使っているか分かりませんが、一般的にはユーザーがモーダルウィンドウに適切な処置をして閉じない限り制御が戻らないもので(alert とか confirm がその例)、複数モーダルウィンドウを開くということはないはずです。「モーダル」でググってみてください。
退会済みユーザー

退会済みユーザー

2017/05/12 05:25

同一のソースをページ内に複数個記述してるのですが、 一番最初に記述したソースしか反応しません。<<<<<< 同一のソースとは具体的にどのソースのことでしょうか?
tantalus

2017/05/12 05:40 編集

hayatomo様 ご連絡ありがとうございます。 html内の <!-- モーダル口コミ --> <?php require 'review.php'; ?> <?php require 'review.php'; ?>←このことです!
guest

回答2

0

ベストアンサー

if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1)

これがあったら、既にモーダルウィンドウ出てたら、2つ目のやつは出ないのでは?

投稿2017/05/12 05:23

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/05/12 05:30

あと、 $("#modal-open").click()の部分ですが、ページ内に"modal-open"というID名をもつ要素が2つ以上あるわけですよね?同じIDは同一ページ内に1つしか使えませんが、$("#modal-open").click()は1つ目のボタンにのみ、イベントが割り当てられてしまうのではないですか? IDではなくて、classを使ったほうがいいのでは?
退会済みユーザー

退会済みユーザー

2017/05/12 05:33

JQueryは長いこと触ってないので忘れてしまってますが、$("#modal-open")[1]で2つ目のモーダルを開くボタン要素って取得できますか?
tantalus

2017/05/12 05:50

$("#modal-open")[1]で2つ目のモーダルを開くボタン要素って取得 こちらですが、試してみたら取得できませんでした。 ちょっとclassにしてやってみます! ありがとうございます! また、追記させていただきます!!
tantalus

2017/05/12 06:01

hayatomo様 ありがとうございます!#modal-openをclassにしたらできました! 本当にありがとうございます! ただ、理解不足で大変申し訳ないのですが、上記ご質問の ”ページ内に"modal-open"というID名をもつ要素が2つ以上”というのは読み込んでいるphp内の#modal-openは1つしかないのですが、htmlに下記のような記述をすると2つIDがあるということになるのでしょうか? <?php require 'review.php'; ?> <?php require 'review.php'; ?> レベルの低い質問で申し訳ないですが、ご教授いただけましたらうれしいです。 よろしくお願いいたします。
退会済みユーザー

退会済みユーザー

2017/05/12 07:05

PHPファイル内のHTMLコードが丸々、該当ページに2回挿入されるわけですよね? であれば、同じことが2回繰り返されるわけですから必然的に重複しますよね?
tantalus

2017/05/12 07:11

ありがとうございます。 理解しました! 理解が乏しく大変申し訳ありませんでした。 今回はとても助かりました。 今後もわからないことがあった際はお力添えいただけますと幸いです。 本当にありがとうございました!
guest

0

モーダルであれば閉じて別のモーダルを開くというのが原則でしょう。
alertやconfirmなど処理を持っていくものは一度に1つしか表示しないことに
しておかないとおかしなことになるでしょう
複数枚windowを開くのでしたらモーダルではない処理を検討ください

投稿2017/05/12 04:32

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2017/05/12 08:33

蛇足ですが、発展途上の機能でdialogタグというのがあります。 多少拡張すれば擬似的なmodalより汎用性は高いかもしれません
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問