关于javascript：点击关闭按钮后，模式会自动重新打开

Modal reopens automatically after clicking the closing button

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

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

现在我的问题是：

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

棘手的部分到了。每当我用键盘上的逃逸按钮关闭视图时，它都会关闭，并且会回到我以前的视图。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<?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"";
echo"";
echo"";
echo "";
echo "<button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\"></button>";
echo "<h4 class=\"modal-title\" id=\"myModalLabel\">Weitere Information </h4>";
echo"";
echo"";
echo"<dl class=\"dl-horizontal\">";
echo"<dt>Bereich</dt>";
echo"<dd>" .$row['Bereich']."</dd>";
echo"</dl>";
echo"";
echo"";
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"";
echo""; //
echo"";//
echo"";//
echo"</td>";
echo"</tr>";
}

?>

为了澄清：

如果将$ thisModalId更改为先前的" MyModal"，则可以使用，但是按钮应该会打开相同的文本。

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

在此先感谢您的帮助。

最好的祝福。

相关讨论

这可能是由于模态div在onclick处理程序所定义的元素(tr)中定义的事实引起的。如果关闭按钮处理程序没有使用click事件，它将一直冒泡到包含元素(div, div, div, div, td, tr)。当到达tr时，将执行onclick处理程序，并且模式将再次打开。

显然，您可以通过在表结构中没有模态div来解决此问题，该表结构实际上并没有任何功能。这意味着您将必须执行多个循环，因为div必须始终位于表之外。这并不意味着如果您接受上述某些注释程序的建议并将PHP与HTML分开一点，您的代码就会变得混乱。

尝试这样的事情：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

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

<?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
?>
' tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" id="myModalLabel">Weitere Information </h4>

<dl class="dl-horizontal">
<dt>Bereich</dt>
<dd><?php echo $modal['Bereich'] ?></dd>
</dl>

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>

//
//
//
<?php
}