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

Question

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

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

我的问题：

每当我点击一个名为“详细信息”模式视图被打开，并包含它应该数据按钮。 但是，当我尝试用“关闭” - 按钮或右上角的X关闭视图时，模态视图将关闭一秒钟，然后自行重新打开。 执行上述操作之一后，背景会变暗。

这里是棘手的部分。每当我用键盘上的退出按钮关闭视图时，它都会按照它的原样关闭，然后我会回到之前的视图。

<?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”它的工作原理，但按钮会，因为它应该，打开相同的文本。

如果您需要更多的源代码或其他东西，我会很乐意发布它。

在此先感谢您的帮助球员。

此致敬礼。

Answer 1

这可能是由于您的模块div在定义onclick处理程序的元素（tr）内部定义的。如果关闭按钮处理程序不消耗单击事件，它将一直向上包含元素（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 
    }