テーブル内のセルをクリックするだけでモーダルを作成する必要があります

Question

タイトルがあまりにも混乱しないように願っています。私はそのようなタイトルを読めば混乱するだろうと知っています。

とにかく、深刻なノートで、私は次のコードを持っている：

<table> 
<thead> 
<tr> 
<td>Heading</td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td data-toggle="modal" data-target=".Table1">Table 1</td> 
<td>Table 2</td> 
</tbody> 
</table> 

をそして今、私は、次の2個のモーダルを持っている：（短くてシンプルなこのポストを保つために、私は一つだけモーダルのコードを掲載します）

<div class="modal Table1"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-header"> 
<button data-dissmiss="modal" class="close"><span>&times;</span></button> 
<div class="modal-title">Table 1</div> 
</div> 
<div class="modal-body"> 
<table> 
<thead> 
<tr> 
<td>Table 1</td> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>ABC</td> 
</tr> 
</tbody> 
</table> 
</div> 
</div> 
</div> 
</div> 

まず、私はブートストラップを使用しており、すべてのクラスを使用しています。

いいえ、このモーダル（ポップアップ）は、最初のテーブルのセルをクリックしたときにのみ生成される必要があります。

私は、このモーダルがブートストラップのために隠されていることを知っていますが、それはまさに私が望まないものです。私はこのモーダルが隠されているにもかかわらず、ページのロード時に作成されないようにします。最初のテーブルのセルをクリックするだけで作成して表示する必要があります。

ご協力いただければ幸いです。

Answer 1

ajax + phpを使用してモーダルダイナミックを作成する必要があります。 ページが最初に実行されると、ページにはモーダルボディがありません。しかし、はい、divsはページにあるはずです。モーダルの本体を動的に生成し、ポップアップでバインドすることができます。下記のコードを確認してください。

<?php 
    //PHP CODE 
    if(isset($_POST['openModal'])){ 
     ob_start(); ?> 
     <table> 
      <thead> 
       <tr> 
        <td>Table 1</td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>ABC</td> 
       </tr> 
      </tbody> 
     </table> 
     <?php 
     echo json_encode(["HTML"=>ob_get_clean()]); 
    }else{ ?> 
     // HTML CODE 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

     <table> 
      <thead> 
       <tr> 
        <td>Heading</td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td data-toggle="modal" data-target="#myModal">Table 1</td> 
        <td>Table 2</td> 
       </tr> 
      </tbody> 
     </table> 
     <!-- Modal --> 
     <div class="modal fade" id="myModal" role="dialog"> 
      <div class="modal-dialog"> 

       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">Modal Header</h4> 
        </div> 
        <div class="modal-body"> 
        </div> 
       </div> 
      </div> 
     </div> 
     //Javascript + jquery code 
     <script> 
      $("td[data-target='#myModal']").on("click",function(){ 
       $.ajax({ 
        url : 'abc.php', 
        data : "openModal=1", 
        type : 'post', 
        dataType : 'json', 
        success : function(data){ 
         $(".modal-body").html(data.HTML); 
        } 
       }); 
      }); 
     </script> 
    <?php } ?>