单击关闭按钮后，Modal会自动重新打开

Modal reopens automatically after clicking the closing button

本文关键字：新打开 Modal 关闭按钮 单击      更新时间：2023-09-26

我一直在尝试在表中动态创建模式视图。

用于创建表的数据来自sql数据库。

现在我的问题是：

每当我点击一个名为"Details"的按钮时，模式视图就会打开，并包含它应该包含的数据。然而，当我尝试用"关闭"按钮或右上角的X关闭视图时，模式视图会关闭一秒钟，然后自行重新打开。在我执行上述操作之一后，背景会变暗。

棘手的部分来了。每当我用键盘上的escape按钮关闭视图时，它就会正常关闭，然后我就会回到以前的视图。

<?php
mysql_connect("localhost", "****" , "****");
mysql_select_db("hallo");
$sql= "SELECT * FROM erfassung WHERE Status='Abgeschlossen'";
$query=mysql_query($sql) or die (mysql_error());
while($row = mysql_fetch_assoc($query)) {
    $thisId = $row['id'];
    $thisModalId = 'modal'.$thisId;
    $thisModalIdHref = '#'.$thisModalId;
    $thisFormDoneId = $row['id'].'FormDoneId';
  // Create table row
  echo "<tr onclick='"input'" data-toggle='"modal'" href='$thisModalIdHref'>";
    echo "<td>";
    echo $row['Name'];
    echo "<td>";
    echo $row['Betreff'];
   echo "<td>";
   echo "<button class='"btn btn-primary btn-lg'" data-toggle='"modal'" data-target='$thisModalIdHref'>";
   echo   "Details";
   echo "</button>";

echo"<div class='"modal fade'" id='$thisModalId' tabindex='"-1'" role='"dialog'" aria-labelledby='"myModalLabel'" aria-hidden='"true'">";
 echo "<div class='"modal-dialog'">";
   echo "<div class='"modal-content'">";
    echo  "<div class='"modal-header'">";
     echo  "<button type='"button'" class='"close'" data-dismiss='"modal'" aria-hidden='"true'">&times;</button>";
      echo  "<h4 class='"modal-title'" id='"myModalLabel'">Weitere Information </h4>";
       echo "</div>";
        echo"<div class='"modal-body'">";
        echo "<dl class='"dl-horizontal'">";
        echo "<dt>Bereich</dt>";
        echo "<dd>" .$row['Bereich']. "</dd>";
        echo "</dl>";
        echo"</div>";
       echo"<div class='"modal-footer'">";
       echo "<button type='"button'" class='"btn btn-default'" data-dismiss='"modal'">Close</button>";
       echo "<button type='"button'" class='"btn btn-primary'">Save changes</button>";
      echo"</div>";
    echo"</div>"; //<!-- /.modal-content -->
   echo"</div>";//<!-- /.modal-dialog -->
 echo"</div>";//<!-- /.modal -->
    echo "</td>";
  echo "</tr>";
}
?>

澄清：

如果$thisModalId被更改为以前的"MyModal"，它可以工作，但该按钮将按预期打开相同的文本。

如果你需要更多的源代码或其他东西，我会非常乐意发布

提前感谢你们的帮助。

致以最良好的问候。

这可能是由于您的模态div是在定义onclick处理程序的元素（tr）中定义的。如果关闭按钮处理程序不使用click事件，它将一直向上（div, div, div, div, td, tr）冒泡到包含的元素。当它到达tr时，onclick处理程序将执行，模态将再次打开。

显然，您可以通过在表结构中不包含模态div来解决这个问题，因为表结构实际上并没有函数。这意味着您将不得不执行多个单独的循环，因为div必须一直在表之外。这并不意味着，如果你接受了上面一些评论者的建议，并将PHP与HTML稍微分开，你的代码就会变得一团糟。

试试这样的东西：

<?php
  // Collect data
  mysql_connect("localhost", "****" , "****");
  mysql_select_db("hallo");
  $sql= "SELECT * FROM erfassung WHERE Status='Abgeschlossen'";
  $query=mysql_query($sql) or die (mysql_error());
  $modals = array();
  while($row = mysql_fetch_assoc($query)) {
    $modals[] = array(
      'id' => 'modal' . $row['id'],
      'href' => '#modal' . $row['id'],
      'FormDoneId' => $row['id'] . 'FormDoneId',
      'Name' => $row['Name'],
      'Betreff' => $row['Betreff'],
      'Bereich' => $row['Bereich'],
    );
  }
?>
<table> <!-- Or something -->
<?php
  foreach ($modals as $modal) {
    // Create table rows
?>
  <tr onclick="input" data-toggle="modal" href="<?php echo $modal['href'] ?>">
    <td>
    <?php echo $modal['Name'] ?>
    <td>
    <?php echo $modal['Betreff'] ?>
   <td>
   <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="<?php echo $modal['href'] ?>">
       Details
   </button>
    </td>
  </tr>
<?php
  }
?>
</table>
<?php
  foreach ($modals as $modal) {
    // Create modal divs
?>
<div class="modal fade" id='<?php echo $modal['id'] ?>' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-header">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title" id="myModalLabel">Weitere Information </h4>
       </div>
        <div class="modal-body">
        <dl class="dl-horizontal">
        <dt>Bereich</dt>
        <dd><?php echo $modal['Bereich'] ?></dd>
        </dl>
        </div>
       <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div> //<!-- /.modal-content -->
   </div>//<!-- /.modal-dialog -->
 </div>//<!-- /.modal -->
<?php
  }
相关文章：