所以在我的网页上我有可点击的图片。 <div class="col-lg-1 col-md-1 col-xs-6 thumb">
<a class="responsive" href="#test" data-toggle= "modal">
<img class="img-responsive" src="image link" alt="">
name under the image
</a>
</div>
打开一个弹出窗口
<div class = "modal fade" id = "test" role = "dialog">
<div class = "modal-dialog">
<div class = "modal-content">
<div class = "modal-header">
<h4>test title</h4>
</div>
<div class = "modal-body">
<table class = "table table-hover">
<Thead>
<tr>
<th>Type</th>
<th>Name</th>
<th>Author</th>
<th>Github</th>
<th>Topic</th>
<th>Install</th>
</tr>
</Thead>
<tbody>
<tr>
<td class = "danger">Normal</td>
<td class = "info">No name yet</td>
<td class = "info">No author yet</td>
<td class = "info"><a href = "#">Click here</td>
<td class = "info"><a href = "#">Show</td>
<td class = "info"><a href = "A link"</td>
</tr>
<tr>
<td class = "danger">Normal</td>
<td class = "info">No name ye</td>
<td class = "info">No author yet</td>
<td class = "info"><a href = "#">Click here</td>
<td class = "info"><a href = "#">Show</td>
<td class = "info"><a href = "A link">Install</td>
</tr>
<tr>
<td class = "danger">Normal</td>
<td class = "info">No name yet</td>
<td class = "info">No author yet</td>
<td class = "info"><a href = "#">Click here</td>
<td class = "info"><a href = "#">Show</td>
<td class = "info"><a href = "A link">Install</td>
</tr>
</tbody>
</table>
</div>
<div class = "modal-footer">
<a class = "btn btn-default" data-dismiss = "modal">Close</a>
</div>
</div>
</div>
然后我决定使用不同的弹出窗口放置另一个图像。 我将弹出代码复制到第一张图片下面并制作了另一张图片但是当我打开第二张图片时，背景只会变灰并且弹出窗口没有出现。
但是，如果我将第二个弹出窗口的代码复制到第一个弹出窗口之上，那么第二个弹出窗口工作但不是我创建的第一个弹出窗口。
答案 0 :(得分：1)
我做了一个有效的JSFiddle here。您的代码应如下所示。注意你的身份证。对于每种模态，它们应该总是不同的。
<div class="col-lg-1 col-md-1 col-xs-6 thumb"> <a class="responsive" href="#test" data-toggle="modal">
...
<div class="modal fade" id="test" role="dialog">
<div class="col-lg-1 col-md-1 col-xs-6 thumb"> <a class="responsive" href="#test2" data-toggle="modal">
...
<div class="modal fade" id="test2" role="dialog">