Bootstrap 4模态框问题：点击表格超链接传SQL ID填充及显示异常

咱们一步步拆解并解决你的问题：先搞定模态框显示在后台的异常，再处理ID传递和数据填充的逻辑。

一、先修复模态框显示在后台的问题 #

你当前的头部资源里重复引入了两个不同版本的jQuery（3.5.1和1.9.1），这会直接导致Bootstrap的JS组件（包括模态框）初始化冲突，这就是模态框躲在后台不显眼的核心原因。

第一步：修正头部资源引用

删掉旧版本的jQuery，只保留Bootstrap 4要求的3.x版本即可：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

二、优化ID传递与模态框数据填充 #

你之前给每个票据生成独立模态框的思路太冗余，维护起来也麻烦。更高效的方式是用一个通用模态框，通过自定义data-*属性传递票据ID，再用AJAX动态拉取数据填充。

第二步：修改表格中的链接代码

给超链接添加data-ticketnumber属性传递ID，同时指向同一个通用模态框：

<?php while ($ticketdata = mysqli_fetch_array($ticketresults)) { ?>
<tbody>
    <th scope="row">
        <a href="#" class="ticket-link" data-toggle="modal" data-target="#ticketModal" data-ticketnumber="<?php echo $ticketdata['ticketnumber']; ?>">
            <?php echo $ticketdata['ticketnumber']; ?>
        </a>
    </th>
    <td><?php echo $ticketdata['policynumber']; ?></td>
    <td><?php echo $ticketdata['registration_number']; ?></td>
    <td><?php echo $ticketdata['insuredname']; ?></td>
    <td><?php echo $ticketdata['contactnumber']; ?></td>
    <td><?php echo $ticketdata['casestatus']; ?></td>
    <td>
        <form method="post">
            <input type="hidden" name="ticketnumber" value="<?php echo $ticketdata['ticketnumber']; ?>">
            <input type="submit" class="btn btn-danger btn-sm" name="deletedata" value="Delete">
        </form>
    </td>
</tbody>
<?php } ?>

第三步：添加通用模态框结构

在页面的</body>标签前（或表格外的合适位置）插入这个模态框的HTML：

<div class="modal fade" id="ticketModal" tabindex="-1" role="dialog" aria-labelledby="ticketModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="ticketModalLabel">票据详情</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="modal-body-content">
                <!-- 这里会通过AJAX动态填充数据 -->
                加载中...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

第四步：编写AJAX脚本拉取数据

用jQuery监听模态框的show.bs.modal事件（这个事件会在模态框显示前触发），获取传递的票据ID，再请求PHP接口拉取详情：

$(document).ready(function() {
    // 监听模态框即将显示的事件
    $('#ticketModal').on('show.bs.modal', function(e) {
        // 从触发链接中获取票据编号
        const ticketNumber = $(e.relatedTarget).data('ticketnumber');
        
        // 发送AJAX请求到数据接口
        $.ajax({
            url: 'get_ticket_details.php', // 你的数据接口文件
            type: 'POST',
            data: { ticketnumber: ticketNumber },
            success: function(response) {
                // 将返回内容填充到模态框
                $('#modal-body-content').html(response);
            },
            error: function() {
                $('#modal-body-content').html('加载失败，请稍后重试');
            }
        });
    });
});

第五步：创建PHP数据接口文件get_ticket_details.php

这个文件负责接收票据ID、查询数据库并返回格式化的详情内容：

<?php
// 替换成你的数据库连接信息
$conn = mysqli_connect('localhost', '你的用户名', '你的密码', '你的数据库名');

if (!$conn) {
    die("数据库连接失败: " . mysqli_connect_error());
}

// 安全获取票据编号（防止SQL注入）
$ticketNumber = mysqli_real_escape_string($conn, $_POST['ticketnumber']);

// 查询票据详情
$sql = "SELECT * FROM 你的票据表名 WHERE ticketnumber = '$ticketNumber'";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    $ticket = mysqli_fetch_assoc($result);
    // 构建格式化的详情HTML
    echo '<div class="container">';
    echo '<div class="row mb-2"><div class="col-sm-4"><strong>票据编号:</strong></div><div class="col-sm-8">' . $ticket['ticketnumber'] . '</div></div>';
    echo '<div class="row mb-2"><div class="col-sm-4"><strong>保单编号:</strong></div><div class="col-sm-8">' . $ticket['policynumber'] . '</div></div>';
    echo '<div class="row mb-2"><div class="col-sm-4"><strong>登记编号:</strong></div><div class="col-sm-8">' . $ticket['registration_number'] . '</div></div>';
    echo '<div class="row mb-2"><div class="col-sm-4"><strong>投保人:</strong></div><div class="col-sm-8">' . $ticket['insuredname'] . '</div></div>';
    echo '<div class="row mb-2"><div class="col-sm-4"><strong>联系电话:</strong></div><div class="col-sm-8">' . $ticket['contactnumber'] . '</div></div>';
    echo '<div class="row mb-2"><div class="col-sm-4"><strong>案件状态:</strong></div><div class="col-sm-8">' . $ticket['casestatus'] . '</div></div>';
    echo '</div>';
} else {
    echo '<p class="text-center text-muted">未找到该票据的详情</p>';
}

mysqli_close($conn);
?>

最后验证效果 #

现在点击表格中的票据编号链接，模态框会正常弹出（不会躲在后台），同时自动拉取对应ID的详情数据填充到模态框内。

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