HTML模式问题，不显示

Question

我在某些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">&times;</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";
    }
}

Answer 1

我认为，如果您使用的是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">&times;</span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div></div>