HTML模式的问题，不显示
HTML模式的问题，不显示
提问于 2018-09-04 08:18:06
我遇到了一些HTML模式的问题。我从一个数据库中进行了一个查询，我希望结果在前端以模式显示。
当只有ID显示在按钮中时，开始时一切都很好。但当我单击其中一个时，只有行中的第一个打开，其余的都不对应。
据我所知，当您想要显示有关特定ID的更多信息时，就像我的情况一样，可以使用锚点<a>，其中首选信息可以通过新的.php文件显示，并通过链接从其他文件中选择。
有没有什么方法可以让我做同样的事情，比如在每个按钮中指定ID，然后弹出包含正确信息的正确模式？
代码如下：
<?php while($row = mysqli_fetch_array($show)): ?>
<button>
<h2>ID:</h2>
<span>
<?php echo $row['id']; ?>
</span>
</button>
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>ΙD:</h2>
<span>
<?php echo $row['id']; ?>
</span>
</div>
<div class="modal-body">
<ul>
<li>
<span>
<?php echo $row['name']; ?>
</span>
</li>
</ul>
</div>
<div class="modal-footer">
<?php echo $row['number']; ?>
</div>
</div>
<?php endwhile; ?>以及打开模态的代码：
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}回答 1
Stack Overflow用户
发布于 2018-09-04 10:51:59
我认为如果你正在使用Bootstrap，你可以使用下面的代码
要打开模式按钮，请执行以下操作：
<button class="btn btn-success" data-toggle="modal" data-target="#try">Open Modal</button>在模式的内部：
<div class="modal fade" id="try" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<form id="form">
<div class="row mt-4">
<div class="col-1"></div>
<div class="col-10">
<h3>Hi</h3>
</div>
<div class="col-1">
<button type="button" class="close mr-4" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
</form>
</div>
</div></div> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52157320
复制相关文章
相似问题
腾讯云开发者
