Question

实际上我想在盒子上点击设置模态，所以我把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>

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

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

如何在Javascript代码中声明我的模态

2 个答案: