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

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

问题分析

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

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

核心思路是：

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

具体步骤

1. 修改 PHP 代码

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

    
    
    
    
    
  
    

      
        
      
      

        Print PDF
        Export Excel
        Export Access
      
    
  

 



  

    

      

        

        
          ×
        
      
      

        
      
    
  

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("
Start Date: " + startDate + "
End Date: " + endDate + "

							

								
								

									千博企业网站管理系统个人SQL版20120128
									
千博企业网站管理系统个人版免费下载、免费使用、功能无限制，完全免费拥有(请尊重开发者版权，保留首页底部版权显示)：内含Flash动画源码、Access数据库程序包、SQL数据库程序包。  千博企业网站管理系统个人版特点： 1.全站模块化操作，静态标签调用，更强扩展性… 千博企业网站系统个人版是一套基于.Net + Access(SQL)建站管理系统软件、不依赖于服务商特定空间、不需安装任何空间商组
								
								下载 
							
						
");

    // 显示模态框
    $("#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("

  Start Date: " + startDate + "

  End Date: " + endDate + "

  ");: 使用获取到的 startDate 和 endDate 数据更新 id 为 modal-body-content 的元素（模态框内容）的 HTML 内容。 这里使用了简单的 HTML 格式，你可以根据需要自定义模态框内容的展示方式。
• $("#modal-default").modal('show');: 以编程方式显示 id 为 modal-default 的模态框。

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

确保你的页面引入了 jQuery 库，因为上面的 JavaScript 代码使用了 jQuery。 你可以在 HTML 文件的

4. 放置 JavaScript 代码

将 JavaScript 代码放在 HTML 文件的 标签之前，或者放在