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

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

ただいまの
回答率

89.07%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 6,101

tantalus

score 14

前提・実現したいこと

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

html内にある下記のソースで2番目にあるのが反応しないので反応させたいです。

<!-- モーダル口コミ -->
<?php require 'review.php'; ?>
<?php require 'review.php'; ?>

発生している問題・エラーメッセージ

同一のソースをページ内に複数個記述してるのですが、
一番最初に記述したソースしか反応しません。

一番最初のソース以降の記述も反応するようにしたいです。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
 <title>口臭撃退|爽快クリア</title>
 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link href="css/sp/new_style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TK8RJM5"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<img src="image/sp/new_ver_k/renewal_001_001.jpg">
<img src="image/sp/new_ver_k/renewal_001_002.jpg">
<a href="<?php require './buy/buy-teiki.php'; ?>">
<img src="image/sp/new_ver_k/renewal_001_003.jpg" class="mt mb"></a>
<img src="image/sp/new_ver_k/renewal_001_004.jpg">
<img src="image/sp/new_ver_k/renewal_001_005.jpg">
<img src="image/sp/new_ver_k/renewal_001_006.jpg">
<img src="image/sp/new_ver_k/renewal_001_007.jpg">

**この部分です**
<!-- モーダル表示 -->
<?php require 'review.php'; ?><!-- この部分に表示されるボタンはモーダルウィンドウ出ます -->
<?php require 'review.php'; ?><!-- この部分に表示されるボタンはモーダルウィンドウ出ません。同じように他の位置にしても出せるようにしたい -->

<img src="image/sp/new_ver_k/renewal_002_001.jpg">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/sp/modal.js"></script>
</body>
</html>
#modal-content {
 width: 90% ;
 margin: 0 ;
 padding: 20px ;
 background: #BCFAEE;
 position: fixed ;
 display: none ;
 z-index: 2 ;
font-family: "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;

}

#modal-content-innar{
 margin:0 auto;
 width:100%;
}

#modal-overlay {
 z-index: 1 ;
 display: none ;
 position: fixed ;
 top: 0 ;
 left: 0 ;
 width: 100% ;
 height: 120% ;
 background-color: rgba( 0,0,0, 0.75 ) ;
}

.button-link {
 color: #00f ;
 text-decoration: underline ;
}

.button-link:hover {
 cursor: pointer ;
 color: #f00 ;
}

.custmaer-voice-wrap{
    overflow: scroll;
    height: 400px;
}

.voice-area{
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
}

.voice-area p:first-child{
    border-left: 3px #BCFAEE solid;
    border-bottom: 1px #BCFAEE solid;
    padding-left: 5px;
    margin-bottom: 5px;
    font-size: 2.0rem;
}

.voice-area p:nth-child(even){
    font-size: 1.2rem;
    color: orange;
}

.voice-area p:nth-child(even) span{
    display: inline-block;
    border-radius: 3px;
    background-color: orange;
    color: white;
    text-align: center;
    padding: 1px 3px;
    margin-right: 3px;
}

.voice-area p:last-child{
    margin-top: 10px;
    font-size: 1.7rem;
}

.close{
    margin-top: 15px;
}
<div id="orver" class="mt mb">
 <div id="wrap">
 <div id="contents">
<!-- モーダルウィンドウボタン -->
 <a id="modal-open" class="button-link"><img src="image/sp/new_ver_k/renewal_001_007-08.jpg"></a>
 </div>
 </div>
</div>
<div id="modal-content">
 <div id="modal-content-innar">
 <div class="custmaer-voice-wrap">
     <div class="voice-area">
         <p>aaaa</p>
         <p>bbbb</p>
         <p>cccc</p>
     </div>
     <div class="voice-area">
         <p>aaaa</p>
         <p>bbbb</p>
         <p>cccc</p>
     </div>
 </div>
<p class="close"><a id="modal-close" class="button-link"><img src="image/sp/new_ver_k/modal-close.png"></a></p>
<!-- モーダルウィンドウ閉じるボタン --> 
</div>
</div>
var pointY;
$(function(){
    $("#modal-open").click(function(){
        //キーボード操作などにより、オーバーレイが多重起動するのを防止する
        $( this ).blur() ;    //ボタンからフォーカスを外す
        if( $( "#modal-overlay" )[0] ) return false ;        //新しくモーダルウィンドウを起動しない (防止策1)
        //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ;        //現在のモーダルウィンドウを削除して新しく起動する (防止策2)

        //背景固定
        pointY = $(window).scrollTop();
        $('body').css({
            'position': 'fixed',
            'width': '100%',
            'top': -pointY
        });

        //オーバーレイを出現させる
        $( "body" ).append( '<div id="modal-overlay"></div>' ) ;

        $( "#modal-overlay" ).fadeIn( "slow" ) ;

        //コンテンツをセンタリングする
        centeringModalSyncer() ;

        //コンテンツをフェードインする
        $( "#modal-content" ).fadeIn( "slow" ) ;

        //[#modal-overlay]、または[#modal-close]をクリックしたら…
        $( "#modal-overlay,#modal-close" ).unbind().click( function(){

            //[#modal-content]と[#modal-overlay]をフェードアウトした後に…
            $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){

                //[#modal-overlay]を削除する
                $('#modal-overlay').remove() ;

                //背景固定を解除する
                releaseScrolling();
            } ) ;

        } ) ;

    } ) ;
//背景固定解除
function releaseScrolling(){
    $('body').css({
        'position': 'relative',
        'width': '',
        'top': ''
    });
    $(window).scrollTop(pointY);
}

    //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する
    $( window ).resize( centeringModalSyncer ) ;

    //センタリングを実行する関数
    function centeringModalSyncer() {

        //画面(ウィンドウ)の幅、高さを取得
        var w = $( window ).width() ;
        var h = $( window ).height() ;

        // コンテンツ(#modal-content2)の幅、高さを取得
        // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。
        var cw = $( "#modal-content" ).outerWidth( {margin:true} );
        var ch = $( "#modal-content" ).outerHeight( {margin:true} );
        var cw = $( "#modal-content" ).outerWidth();
        var ch = $( "#modal-content" ).outerHeight();

        //センタリングを実行する
        $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ;

    }

} ) ;

試したこと

<?php require 'review.php'; ?>で読み込まず、外部ファイルreview.phpの内容を全部htmlに入れたのですが、
これでも一番最初しかモーダルウィンドウは出ませんでした。
拙い技術と質問で申し訳ありません。
よろしくお願いいたします。

補足情報(言語/FW/ツール等のバージョンなど)

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2017/05/12 13:43

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2017/05/12 14:25

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

    キャンセル

  • tantalus

    2017/05/12 14:27 編集

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

    キャンセル

回答 2

checkベストアンサー

+2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/12 15: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 16:05

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

    キャンセル

  • 2017/05/12 16:11

    ありがとうございます。
    理解しました!
    理解が乏しく大変申し訳ありませんでした。

    今回はとても助かりました。
    今後もわからないことがあった際はお力添えいただけますと幸いです。
    本当にありがとうございました!

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/12 17:33

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

    キャンセル

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

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る