Как я могу объявить свой модальный код в коде Javascript

На самом деле я хочу установить модальный на поле-нажмите, чтобы я поставил тег onclick в поле тега, но после этого мой модальный не появляется…
На самом деле я передал уникальный-Id для индивидуальной коробки, и это нормально, но модальное не появляется…..Поэтому, пожалуйста, помогите мне

   <?php

 include("connect.php");
$query="SELECT * FROM `orders`";
$filter_Result=mysqli_query($con,$query);

$count=0;
while($row = mysqli_fetch_array($filter_Result)){
 $count++;
 $boxid = $count;

        echo "<div class='block'>"; 



 echo "<div class='boxed' id=$boxid onclick='myFunction($boxid)'>";
 "<button id='$boxid'>Open Modal</button>";

 "<div id='$boxid' class='modal'>";

 "<div class='modal-content'>";
 "<span class='close'>x</span>";
 "<p>Some text in the Modal..</p>";
  "</div>";

  "</div>";
   echo "<div id='container'>";


  echo "<td>" . $row['id'] . "</td>" ."<br>"; 
   echo "<td>" . $row['status'] . "</td>"."<br>";
  echo "<td>" . $row['created_date'] . "</td>"."<br>";
  echo "<td>" . $row['uid'] . "</td>"."<br>"."<br>"."<br>"."<br>";

  echo "</div>";


  echo "</div>";


  echo "</div>";


 }

  ?>
 <script>
  function myFunction(id) {
  //modal = document.getElementById($id);
    //window.alert(modal);

  // Get the button that opens the modal
   //var btn = document.getElementById("myBtn");
    window.alert(id);
    document.getElementById(id).innerHTML = Date();

    }

 </script>

2 ответа

  1. Заменить этот код:

    <?php
    
    include("connect.php");
    $query="SELECT * FROM `orders`";
    $filter_Result=mysqli_query($con,$query);
    
    $count=0;
    while($row = mysqli_fetch_array($filter_Result)){
     $count++;
     $boxid = $count;
    
        echo "<div class='block'>"; 
    
    
    
     echo "<div class='boxed'>";
     "<button onclick='myFunction($boxid)'>Open Modal</button>";
    
     "<div id='$boxid' class='modal'>";
    
     "<div class='modal-content'>";
     "<span class='close'>x</span>";
     "<p>Some text in the Modal..</p>";
      "</div>";
    
      "</div>";
       echo "<div id='container'>";
    
    
      echo "<td>" . $row['id'] . "</td>" ."<br>"; 
       echo "<td>" . $row['status'] . "</td>"."<br>";
      echo "<td>" . $row['created_date'] . "</td>"."<br>";
      echo "<td>" . $row['uid'] . "</td>"."<br>"."<br>"."<br>"."<br>";
    
      echo "</div>";
    
    
      echo "</div>";
    
    
      echo "</div>";
    
    
     }
    
      ?>
     <script>
      function myFunction(id) {
          modal = document.getElementById($id);
          window.alert(modal);
      }
     </script>
    
  2. Используйте как это, это всплывающее окно модели bootstrap

      <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.2/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    
    
    <div class="container">
      <h2>Modal Example</h2>
      <!-- Trigger the modal with a button -->
    
      <?php
    
     include("connect.php");
    $query="SELECT * FROM `orders`";
    $filter_Result=mysqli_query($con,$query);
    
    $count=0;
    while($row = mysqli_fetch_array($filter_Result)){
     $count++;
     $boxid = $count;
    
         echo '<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal'.$boxid.'">Open Modal</button>
    
      <div class="modal fade" id="myModal'.$boxid.'" role="dialog">
        <div class="modal-dialog">
    
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal">&times;</button>
              <h4 class="modal-title">Modal Details</h4>
            </div>
            <div class="modal-body">
                <tr width="100%">
                <td>'. $row['id'].'</td>            
                <td>'. $row['status'].'</td>            
                <td>'. $row['created_date'].'</td>          
                <td>'. $row['uid'].'</td>           
                </tr>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
    
        </div>
      </div>';
    
    
     }
    
    
      ?>
    
    </div>