Bootstrap 3 - 超过 1 个弹出窗口不工作
Bootstrap 3 - more than 1 popup not working
因此在我的网页中我有可点击的图片。 <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>
然后我决定放另一张带有不同弹出窗口的图片。
我复制了第一个下面的弹出代码并制作了另一个图像但是当我打开第二个图像时背景只有灰色并且弹出窗口没有出现。
但是，如果我将第二个弹出窗口的代码复制到第一个弹出窗口的上方，那么第二个弹出窗口会起作用，但我创建的第一个弹出窗口不会起作用。
我制作了一个可用的 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">
因此在我的网页中我有可点击的图片。 <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>
然后我决定放另一张带有不同弹出窗口的图片。 我复制了第一个下面的弹出代码并制作了另一个图像但是当我打开第二个图像时背景只有灰色并且弹出窗口没有出现。
但是，如果我将第二个弹出窗口的代码复制到第一个弹出窗口的上方，那么第二个弹出窗口会起作用，但我创建的第一个弹出窗口不会起作用。
我制作了一个可用的 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">