基于模态框点击显示不同数据的教程

花韻仙語

发布时间：2025-10-15 11:55:12

990人浏览过

来源于php中文网

原创

基于模态框点击显示不同数据的教程

本文旨在解决在循环生成的表格中，点击每一行对应的链接，弹出模态框并显示该行特定数据的需求。通过JavaScript监听链接点击事件，动态更新模态框内容，实现每个模态框展示对应数据的效果。避免了所有模态框显示相同数据的常见问题。

在Web开发中，经常需要在表格或其他循环结构中，点击某一项后弹出模态框，并展示该项的详细信息。如果模态框的内容是静态的，或者所有项都显示相同的内容，则问题不大。但如果需要每个模态框显示对应的数据，就需要动态更新模态框的内容。以下提供一种使用JavaScript实现该功能的方案。

解决方案

该方案的核心思想是：

为每个链接添加唯一标识： 使用唯一的ID或自定义data-*属性，将链接与其对应的数据关联起来。
监听链接的点击事件： 使用JavaScript监听链接的点击事件。
动态更新模态框内容： 在点击事件处理函数中，获取与链接关联的数据，并更新模态框的内容。
显示模态框： 使用JavaScript显示模态框。

具体步骤

以下是一个示例，假设我们有一个包含案件报告的表格，每个报告都有一个caseType（案件类型）字段，点击案件类型链接，需要弹出模态框显示该案件类型的详细信息。

1. HTML 代码 (PHP循环部分)：

<?php
    $mysqli = new mysqli('localhost', 'mushref', 'Almadina1!', 'security_db')
    or die('Dramatic Error: ' . mysqli_error($mysqli));

    $selectquery = "SELECT * FROM cases_reports";
    $query = mysqli_query($mysqli, $selectquery);
    $nums = mysqli_num_rows($query);

    while($res = mysqli_fetch_array($query)) {
        $case_id = $res['id']; // 假设每条记录有一个唯一的ID
?>
  <tr>
    <td class="name mb-0 text-sm"> <?php echo $res['cccEmployee']?> </td>
    <td> <?php echo $res['irNumber']?> </td>
    <td> <a href="#" class="modalLauncher" data-case-id="<?php echo $case_id; ?>" data-toggle="modal" data-target="#modal-default"><?php echo $res['caseType']?></a> </td>
    <td> <?php echo $res['startDateTime']?> </td>
    <td> <?php echo $res['endDateTime']?> </td>
    <td>
      <div class="dropdown">
        <a class="btn btn-sm btn-icon-only text-light" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-ellipsis-v"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow">
          <a class="dropdown-item" href="#">Print PDF</a>
          <a class="dropdown-item" href="#">Export Excel</a>
          <a class="dropdown-item" href="#">Export Access</a>
        </div>
      </div>
    </td>
  </tr>
<?php }?> <!-- End php While -->

  <div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true">
    <div class="modal-dialog modal- modal-dialog-centered modal-" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modal-title-default"></h6>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body" id="modal-body-content">
          </div>
      </div>
  </div>

关键修改：

Typeface

AI创意内容创作助手

下载

给链接添加了 class="modalLauncher" 方便JS选择器选中。
添加了 data-case-id="<?php echo $case_id; ?>"，存储了每条记录的ID。
移除了modal中的PHP代码，将内容留给JS动态填充。
添加了id="modal-body-content" 用于JS更新模态框内容。

2. JavaScript 代码：

$(document).ready(function(){
    $(".modalLauncher").click(function(e){
        e.preventDefault(); // 阻止链接的默认行为

        var caseId = $(this).data("case-id"); // 获取案件ID

        // 使用 AJAX 请求获取该案件的详细信息
        $.ajax({
            url: "get_case_details.php", // 替换为你的获取数据的URL
            type: "GET",
            data: { case_id: caseId },
            dataType: "json", // 期望服务器返回 JSON 数据
            success: function(response) {
                // 更新模态框内容
                $("#modal-title-default").html(response.caseType); // 假设返回的数据包含 caseType 字段
                $("#modal-body-content").html(response.caseDetails); // 假设返回的数据包含 caseDetails 字段
                // 显示模态框
                $("#modal-default").modal("show");
            },
            error: function(xhr, status, error) {
                console.error("Error fetching case details:", error);
                alert("Failed to load case details."); // 提示用户加载失败
            }
        });
    });
});

关键说明：

e.preventDefault(); 阻止了链接的默认跳转行为。
$(this).data("case-id") 获取了链接的 data-case-id 属性值，即案件ID。
$.ajax() 发送 AJAX 请求到服务器，获取案件详细信息。
success 回调函数中，更新模态框的标题和内容。
error 回调函数处理 AJAX 请求失败的情况。

3. 后端代码 (get_case_details.php)：

<?php
    $mysqli = new mysqli('localhost', 'mushref', 'Almadina1!', 'security_db')
    or die('Dramatic Error: ' . mysqli_error($mysqli));

    $caseId = $_GET['case_id'];

    $selectquery = "SELECT * FROM cases_reports WHERE id = '$caseId'";
    $query = mysqli_query($mysqli, $selectquery);
    $res = mysqli_fetch_array($query);

    // 构建 JSON 响应
    $response = array(
        'caseType' => $res['caseType'],
        'caseDetails' => $res['caseDetails'] // 假设有 caseDetails 字段
    );

    // 设置 Content-Type 为 JSON
    header('Content-Type: application/json');

    // 输出 JSON 数据
    echo json_encode($response);
?>

关键说明：