單擊關閉按鈕後，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 
    }