多按钮触发Modal弹窗仅首个生效问题求助（附代码与数据库结构）

点击link1、link2、link3按钮时，希望Modal弹窗显示对应内容（如点击link2显示“this is link2 content”），但目前仅第一个按钮link1可正常生效。

数据库表结构 #

+----+-------+-----------------------+
| id | link  | content               |
+----+-------+-----------------------+
|  1 | link1 | this is link1 content |
|  2 | link2 | this is link2 content |
|  3 | link3 | this is link3 content |
+----+-------+-----------------------+

现有代码 #

<style>
.modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
}
.modal-content {
position: relative;
background-color: #fff;
margin: 10% auto;
width: 80%;
}
</style>

<?php
$db = new mysqli("localhost","user","password","database");

$data=$db->query('select * from modal');

while($rows=$data->fetch_assoc()){
echo '<button class="open-modal">'.$rows['link'].'</button>';
$content = $rows['content'];
}
?>
<div class="modal">
<div class="modal-content">
<span class='close'>CLOSE</span>
<div> <?php echo $content ?> </div>
</div></div>


<script>
const modal = document.getElementsByClassName('modal')[0];
const button = document.getElementsByClassName('open-modal')[0];
const close = modal.getElementsByClassName('close')[0];

button.onclick = function() {
modal.style.display = 'block';
};

   close.onclick = function() {
   modal.style.display = 'none';
   };

   window.onclick = function(event) {
   if (event.target == modal) {
   modal.style.display = 'none';
  }
 };
</script>

问题原因 #

1. 按钮事件绑定不全：document.getElementsByClassName('open-modal')[0]仅获取第一个按钮，后续按钮未绑定点击事件，导致只有第一个按钮能触发弹窗。
2. 内容固定无法切换：PHP循环结束后$content的值为最后一条数据（link3的内容），弹窗内容无法随按钮切换。

修正后的代码 #

<style>
.modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
}
.modal-content {
position: relative;
background-color: #fff;
margin: 10% auto;
width: 80%;
padding: 20px;
}
.close {
cursor: pointer;
float: right;
font-weight: bold;
}
</style>

<?php
$db = new mysqli("localhost","user","password","database");
$data = $db->query('select * from modal');

while($rows = $data->fetch_assoc()){
    // 给按钮添加data属性存储对应内容
    echo '<button class="open-modal" data-content="'.htmlspecialchars($rows['content']).'">'.$rows['link'].'</button>';
}
?>
<div class="modal">
<div class="modal-content">
<span class='close'>CLOSE</span>
<!-- 动态内容容器 -->
<div id="modal-content"></div>
</div></div>

<script>
const modal = document.querySelector('.modal');
const contentContainer = document.getElementById('modal-content');
const closeBtn = modal.querySelector('.close');

// 给所有按钮绑定点击事件
document.querySelectorAll('.open-modal').forEach(btn => {
    btn.addEventListener('click', () => {
        // 读取按钮的data属性，替换弹窗内容
        contentContainer.textContent = btn.getAttribute('data-content');
        modal.style.display = 'block';
    });
});

closeBtn.addEventListener('click', () => {
    modal.style.display = 'none';
});

window.addEventListener('click', (e) => {
    if (e.target === modal) modal.style.display = 'none';
});
</script>

关键修改说明 #

• 批量绑定事件：用querySelectorAll获取所有按钮，循环绑定点击事件，确保每个按钮都能触发弹窗。
• 动态传递内容：通过按钮的data-content属性存储对应内容，点击时直接读取并替换弹窗内容，避免PHP循环导致的内容固定问题。
• 事件监听优化：改用addEventListener绑定事件，比直接赋值onclick更灵活，避免事件覆盖。

内容的提问来源于stack exchange，提问作者Huyimin