同じページ内にモーダルの複数のリンクを生成して、それぞれ異なる内容

https://teratail.com/questions/e2znw7h01pb0rj
で、質問されていただいた
「Colorbox」でモーダルウィンドウを出すための続きのような質問です。

同じページ内にモーダルの複数のリンクを生成して、それぞれ異なる内容を表示させたいです。

前回の質問でこのようにご教示頂きました。

①tdの中にモーダルHTMLを置く
②モーダルHTMLをループの外に置いてクリック時のイベントでその行個別の情報を送って非同期で再検索して結果をHTML上に出力（JavaScriptが必要）

私の理解不足で、ご教示頂いたこととは違っていると思うのですが
異なる内容を表示させることは出来ました。

ただ、それは、何個もスクリプトを作るというものです。

<?php
      print("<table>");//テーブル書き出し

         $tw = "aaa";
         
         print("<tr>");
         print("<th></th>");
         print("<td><a href='#colorbox_inline' class='trig-colorbox_inline'>関連ツイート</a></td>");
         print("<div style='display: none'>");
         print("<div id=colorbox_inline>");
         
         print("{$tw}");
         
         print("</div>");
         print("</div>");
         print("</tr>");
    
      print("</table>");
   
    
      $tw = "bbb";
     
      print("<tr>");
      print("<th></th>");
      print("<td><a href='#colorbox_inline2' class='trig-colorbox_inline2'>関連ツイート</a></td>");
      print("<div style='display: none'>");
      print("<div id='colorbox_inline2'>");
      
      print("bbb");
      
      print("</div>");
      print("</div>");
      print("</tr>");

//このスクリプトを何個も書くのはおかしい気が…。
//それともループで生成する？
 
echo <<<EOM
<script>
   $('.trig-colorbox_inline').colorbox({
    inline: true,
    opacity: 0.6,
});
</script>
EOM;

echo <<<EOM
<script>
   $('.trig-colorbox_inline2').colorbox({
    inline: true,
    opacity: 0.6,
});
</script>
EOM;
?>

https://yasaidemo.com/kokutai_hearing/2.php

別のやり方の方がいいのでしょうか？

そもそもですが、PHPが必要な内容に見えません。
全部直に文字列出力してるだけです。

モーダルに必要な部分だけを切り取っています。
HTMLで書いていると
HTMLでは動くのにPHPでは動かなくなることがあるので
そうしていました。

いずれにしてもいきなりPHPじゃなく、モック作ってからにしたほうがPHPも組みやすくなります

HTMLにしてみました。

<link rel="stylesheet" href="colorbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>


</head>
<body>


      <table>
         
         <tr>
         <th></th>
         <td><a href='#colorbox_inline' class='trig-colorbox_inline'>関連ツイート</a></td>
         <div style='display: none'>
         <div id=colorbox_inline>
         
         aaa
         
         </div>
         </div>
         </tr>
    
      </table>
   
      <tr>
      <th></th>
      <td><a href='#colorbox_inline2' class='trig-colorbox_inline2'>関連ツイート</a></td>
      <div style='display: none'>
      <div id='colorbox_inline2'>
      
      bbb
      
      </div>
      </div>
      </tr>
     // </div>
 

<script>
   $('.trig-colorbox_inline').colorbox({
    inline: true,
    opacity: 0.6,
});
</script>

<script>
   $('.trig-colorbox_inline2').colorbox({
    inline: true,
    opacity: 0.6,
});
</script>

</body>
</html>

https://yasaidemo.com/kokutai_hearing/2.html

m.ts10806

2022/09/11 10:44 編集

そもそもですが、PHPが必要な内容に見えません。全部直に文字列出力してるだけです。

m.ts10806

2022/09/11 10:44

いずれにしてもいきなりPHPじゃなく、モック作ってからにしたほうがPHPも組みやすくなります。

行動規範の内容に同意します

回答1件

ベストアンサー

※いずれも実装イメージ。実際のご自身の実装に置き換えてください。

①のHTML例

表示要素はtdもしくはthの中にしか設置できないので、そこを解消。
（現状tr直下にあるような状態なのでHTMLの構文チェックに書ければ明確に指摘されます）

html
1<table>
2  <tr>
3    <th></th>
4    <td>
5      <a href='#colorbox_inline1' class='trig-colorbox_inline'>関連ツイート</a>
6      <div style='display: none'>
7        <div id='colorbox_inline1'>aaa </div>
8      </div>
9    </td>
10  </tr>
11  <tr>
12    <th></th>
13    <td>
14      <a href='#colorbox_inline2' class='trig-colorbox_inline'>関連ツイート</a>
15      <div style='display: none'>
16        <div id='colorbox_inline2'>bbb </div>
17      </div>
18    </td>
19  </tr>
20</table>
21<script>
22   $('.trig-colorbox_inline').colorbox({
23    inline: true,
24    opacity: 0.6,
25});
26</script>

PHP次第。tr内をループならこの方が組みやすいですが、
初期値hiddenでクリックによりモーダルとして上がってくるなら、いっそ全部</table>の後においても同じです。

classなら複数設置できるのでJavaScriptも１個でいいはず。
hrefで「どのIDのカラーボックスを上げるか」を決めている（はず）なので。
（Githubのコードからそのように判断）

②の例

元のPHPコードでDBで検索したり表示内容が固定値なので②は変わるだろうけど、例えばdata属性で個別のコンテンツ内容を入れておいて（あくまで今提示されているHTMLから）

html
1<table>
2  <tr>
3    <th></th>
4    <td>
5      <a href='#colorbox_inline' class='trig-colorbox_inline' data-content="aaa">関連ツイート</a>
6    </td>
7  </tr>
8  <tr>
9    <th></th>
10    <td>
11      <a href='#colorbox_inline' class='trig-colorbox_inline' data-content="bbb">関連ツイート</a>
12    </td>
13  </tr>
14</table>
15<div style='display: none'>
16  <div id='colorbox_inline'></div>
17</div>
18<script>
19$('.trig-colorbox_inline').colorbox({
20    inline: true,
21    opacity: 0.6,
22});
23$('.trig-colorbox_inline').click(function(e){
24  const content = $(e.currentTarget).data('content');
25  $('#colorbox_inline').html(content);
26});
27</script>

このdata-を利用することで如何様にもすることができます。
「詳細を再検索」したい場合は、そのデータを特定可能なIDをdata属性に設置しておいて、
Ajaxにて検索。検索結果を $('#colorbox_inline').html();で設置（ text()のほうがいいこともあるので注意）
要は「モーダルに使いたい個別の情報を持っておき、選択したレコードによって取得内容・表示内容を切り替える」というもの。

あと、説明とか見ていったら
onOpen, onLoad, onComplete, onCleanup, onClosedなど、モーダルの状態によってイベントが設定できるみたいなので、自分でclickを設置しなくても、onOpenあたりで同じように「モーダル表示時にモーダルのコンテンツを書き換え」とできそうにも思うし、そのほうがコードもスッキリしそうです。
example1～example5で様々な実装例があるので、参考にしつつ。なるべく機能を使いたいですしね。

投稿2022/09/11 21:58

編集2022/09/12 10:55

m.ts10806

総合スコア80850