Müssen Modal nur auf das Klicken einer Zelle in einer Tabelle erstellt werden

Question

Ich hoffe, der Titel ist nicht zu verwirrend für Sie; Ich weiß, ich wäre verwirrt, wenn ich einen solchen Titel lesen würde.

Wie auch immer, im Ernst, ich habe den folgenden Code:

<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> 

Und jetzt habe ich die folgenden 2 Modalverben: (halten diesen Beitrag kurz und einfach Ich werde den Code nur für eine modal Post)

<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> 

Erstens benutze ich Bootstrap und damit alle Klassen.

OK, so dass ich dieses modale (Popup) nur beim Klicken auf die Zelle in der ersten Tabelle generiert werden muss.

Jetzt weiß ich, dass dieses Modal wegen Bootstrap versteckt ist, aber das ist genau das, was ich nicht will. Ich möchte nicht, dass dieses Modal beim Laden der Seite erstellt wird, obwohl es ausgeblendet ist. Sie sollte nur beim Klicken auf die Zelle in der ersten Tabelle erstellt und angezeigt werden.

Jede Hilfe wird geschätzt.

Answer 1

sollten Sie ajax + php verwenden, um modale Dynamik zu erstellen. Wenn Ihre Seite anfänglich ausgeführt wurde, hat Ihre Seite nicht den modalen Text auf der Seite. Aber ja die Divs bis sollten da auf der Seite sein. Der Body des Modals kann dynamisch erzeugt und im Popup eingebunden werden. Bitte überprüfen Sie den folgenden Code.

<?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 } ?>