基于模态框点击事件动态展示数据教程-php教程-PHP中文网

基于模态框点击事件动态展示数据教程

霞舞

发布： 2025-10-17 12:14:34

原创

635人浏览过

基于模态框点击事件动态展示数据教程

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

问题分析

在循环中直接生成模态框，并为每个链接设置相同的data-target属性指向同一个模态框ID，会导致所有链接点击后都只会显示第一条数据。这是因为所有的链接都触发了同一个模态框，而模态框的内容在页面加载时就已经被填充为第一条数据。

解决方案：JavaScript动态加载模态框数据

核心思路是：

移除循环中模态框的直接生成：避免在 PHP 循环中重复生成具有相同 ID 的模态框。
使用 JavaScript 监听链接点击事件：为每个链接添加一个唯一的标识，并通过 JavaScript 监听点击事件。
动态更新模态框内容：在点击事件处理函数中，获取与链接关联的数据，并动态更新模态框的标题和内容。
程序化地调用模态框：使用 JavaScript 代码来打开模态框。

具体步骤

1. 修改 PHP 代码

首先，修改 PHP 代码，移除循环中模态框的直接生成，并为每个链接添加一个唯一的标识（例如，使用 data-* 属性存储数据），并赋予一个通用的id，例如modalLauncher。

<?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)) {
?>
<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-type="<?php echo $res['caseType']?>" data-start-date="<?php echo $res['startDateTime']?>" data-end-date="<?php echo $res['endDateTime']?>" 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>
</div>

登录后复制

2. 编写 JavaScript 代码

接下来，编写 JavaScript 代码，监听链接的点击事件，并动态更新模态框的内容。

芦笋演示

一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。

查看详情

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

    // 获取数据
    var caseType = $(this).data('case-type');
    var startDate = $(this).data('start-date');
    var endDate = $(this).data('end-date');

    // 更新模态框标题和内容
    $("#modal-title-default").text(caseType);
    $("#modal-body-content").html("<p>Start Date: " + startDate + "</p><p>End Date: " + endDate + "</p>");

    // 显示模态框
    $("#modal-default").modal('show');
  });
});

登录后复制

代码解释:

$(".modalLauncher").click(function(e) { ... });: 选择所有 class 为 modalLauncher 的元素（也就是你的链接），并为它们绑定点击事件。
e.preventDefault();: 阻止链接的默认行为，避免页面跳转。
$(this).data('case-type');: 从当前点击的链接的 data-case-type 属性中获取数据。 $(this) 指的是当前点击的链接。
$("#modal-title-default").text(caseType);: 使用获取到的 caseType 数据更新 id 为 modal-title-default 的元素（模态框标题）的文本内容。
$("#modal-body-content").html("zuojiankuohaophpcnp>Start Date: " + startDate + "</p><p>End Date: " + endDate + "</p>");: 使用获取到的 startDate 和 endDate 数据更新 id 为 modal-body-content 的元素（模态框内容）的 HTML 内容。这里使用了简单的 HTML 格式，你可以根据需要自定义模态框内容的展示方式。
$("#modal-default").modal('show');: 以编程方式显示 id 为 modal-default 的模态框。

3. 引入 jQuery (如果尚未引入)

确保你的页面引入了 jQuery 库，因为上面的 JavaScript 代码使用了 jQuery。你可以在 HTML 文件的 <head> 标签中添加以下代码：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

登录后复制

4. 放置 JavaScript 代码

将 JavaScript 代码放在 HTML 文件的 </body> 标签之前，或者放在 <head> 标签内的 <script> 标签中，并确保在 jQuery 库之后加载。

注意事项

确保每个链接的 data-* 属性中存储了正确的数据。
根据实际需求，修改 JavaScript 代码，以适应不同的数据格式和模态框内容。
如果模态框无法正常显示，请检查 HTML 结构和 CSS 样式是否正确。
确保 jQuery 库已正确引入。
根据实际情况，调整 CSS 样式以美化模态框的显示效果。
如果数据量较大，可以考虑使用 AJAX 技术异步加载模态框内容，以提高页面加载速度。

总结

通过 JavaScript 监听点击事件，动态更新模态框内容，可以有效地解决循环生成的表格中，点击链接后模态框显示相同数据的问题。这种方法灵活可扩展，可以应用于各种需要动态展示数据的场景。记住，关键在于为每个链接添加唯一的标识，并使用 JavaScript 代码获取与链接关联的数据，并将其动态更新到模态框中。

以上就是基于模态框点击事件动态展示数据教程的详细内容，更多请关注php中文网其它相关文章！