Bootstrap4表格行绑定PHP动态ID模态框点击后无法显示的问题

你碰到的99%的情况都是下面三个问题，挨个排查就能解决：

• 重复触发导致模态状态卡死
  你现在同时给<tr>绑定了两套模态打开逻辑：一套是Bootstrap 原生的data-toggle="modal" data-target="xxx"属性自动触发，另一套是你手动写的jQuery点击事件强制调用$('#userModal-xxx').modal('show')。同一次点击触发两次打开流程，很容易把模态的内部状态搞乱——直接卡在fade类的过渡动画里，透明度一直保持0，视觉上就像完全没弹出来。
  修复方式二选一就行：
  • 删掉<tr>上的data-toggle="modal" data-target="xxx"属性，只保留你自己写的JS触发逻辑
  • 删掉自己写的那段jQuery点击事件，直接用Bootstrap原生的data属性触发，本来你写的data-target ID就是完全匹配的，不需要额外写JS
    更推荐选后者，原生触发的稳定性远高于自己写的重复逻辑。
• 模态框DOM嵌套位置错误
  如果你把动态生成的模态框代码塞在<tr>或者<td>里面、嵌在表格结构内部，Bootstrap 4的模态定位会被表格的默认布局规则冲掉，直接被限制在表格单元格的可视范围内，根本不会弹到页面顶层。
  正确的摆放位置是把所有模态框代码放在整个表格的外面，和表格平级，最好放在页面最底部、</body>标签之前，不要嵌在表格的DOM嵌套结构里。
• JS加载顺序错误导致方法失效
  检查下你的静态资源加载顺序，必须严格按照jQuery → Popper.js → Bootstrap 4 bundle JS的顺序加载，如果你把Bootstrap的JS放在jQuery前面加载，控制台会直接报modal is not a function的错误，就算你打印的ID完全正确，模态方法根本不存在，自然弹不出来。很多人只盯着控制台打印的ID日志，忽略了同一段控制台里的JS报错，才会一直找不到问题。

可以直接复用的跑通代码结构 #

1. 简化后的表格行代码，去掉重复触发的属性：

<tbody>
    <?php foreach($user_list as $row): // 对应你原有数据库循环逻辑
    ?>
    <tr class="clickable-row" data-target-id="userModal-<?= $row['id'] ?>">
        <th scope="row"><?= $row['id'] ?></th>
        <td><?= $row['username'] ?></td>
        <td><?= $levelstr ?></td>
        <td><?= $admin ?></td>
    </tr>
    <?php endforeach; ?>
</tbody>

2. 平级放在表格外面的模态框代码：

<!-- 所有模态框和表格平级，放在页面底部 -->
<?php foreach($user_list as $row):
?>
<div class="modal fade" id="userModal-<?= $row['id'] ?>" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">ID 为 <?= $row['id'] ?> 的用户详情</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                填充对应该行的动态用户内容
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存修改</button>
            </div>
        </div>
    </div>
</div>
<?php endforeach; ?>

3. 对应的触发JS（注意要放在所有DOM加载完成后执行，不要提前放在head里）：

$(".clickable-row").click(function() {
    // 直接从自定义属性拿目标ID，比之前拆分字符串的方式更靠谱，哪怕ID带短横线也不会出错
    const targetModal = $(this).data("target-id");
    $("#" + targetModal).modal("show");
});

小提醒：你之前用$(this).attr("id").split("-")[1]取ID的方式有隐患，如果用户的主键不是纯数字、本身带短横线的话，拆分出来的ID就会错，换成自定义属性直接存目标模态ID，稳定性会高很多。

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