Javascript HTML模态问题，不显示

我遇到了一些HTML模态的问题。我从数据库中进行了一个查询，我希望结果在前端显示一个模态

当按钮中只显示ID时，一开始一切都很好。但当我点击其中一个时，只有行中的第一个打开，其余的都不对应

正如我所知，当您想要显示关于特定ID的更多信息时，就像我的情况一样，可以使用锚

显示更多的列，其中可以通过一个新的.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; ?>

---

我想如果你使用的是引导，你可以使用下面的代码

对于打开模式的按钮：

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

你好
&时代；

这看起来像一个引导模式，对吗？通常，您希望通过

数据目标=“#ID”

启动模式。你能发布启动你的情态动词的代码吗？当然，我的不好！你能不能再给我解释一下，因为我不明白如何才能使它工作

document.getElementById（'myModal'）1）这将只针对1个模态，但您的代码正在循环并生成大量模态。2） 您的代码没有显示任何带有
id=“myModal”
的元素，因此它不会打开任何内容。@ADyson那么使用bootstrap应该可以工作，还是需要更多JavaScript函数？在我们讨论您的另一个问题时，我建议您在HTML中只生成一个模式，然后按需使用正确的数据填充它。因此，您需要a）将模式HTML移出您的外观并给它一个ID，b）在每个按钮上放置一些数据属性以存储该ID的相关名称和数字字段），c）处理按钮的单击事件，并用单击按钮的数据属性中的值填充模式的右侧部分，然后显示模式。再看一看，恐怕还没修好，现在连第一个都还没打开呢modal@LeoBl引导程序是否在您的页面中运行？什么版本？@ADyson是的，3.3.7这个例子有点错误。但这一原则是正确的。这是一个有效的版本：缺少一个div，而且按钮标签没有正确关闭。Hafeez请在发布之前检查您的代码。谢谢
<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>