<!-- 模态框按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" id="modalTrigger">
  打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模态框标题</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="modalContent">
        <!-- 这里将通过Ajax填充内容 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

$(document).ready(function() {
  // 当模态框即将显示时触发
  $('#myModal').on('show.bs.modal', function (event) {
    // 发起Ajax请求
    $.ajax({
      url: 'data.php', // PHP文件路径
      type: 'GET', // 或 'POST'
      dataType: 'html', // 或 'json' 根据返回数据类型
      success: function(response) {
        // 将返回的数据填充到模态框
        $('#modalContent').html(response);
      },
      error: function(xhr, status, error) {
        // 错误处理
        $('#modalContent').html('<p>加载数据失败: ' + error + '</p>');
      }
    });
  });
});

<?php
// 设置内容类型头
header('Content-Type: text/html; charset=utf-8');

// 模拟从数据库获取数据
$data = [
    'title' => '动态加载的标题',
    'content' => '这是从PHP动态加载的内容。当前时间: ' . date('Y-m-d H:i:s')
];

// 返回HTML内容
echo '<h4>'.$data['title'].'</h4>';
echo '<p>'.$data['content'].'</p>';

// 或者返回JSON数据
// header('Content-Type: application/json');
// echo json_encode($data);
?>

$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget); // 触发模态框的按钮
  var userId = button.data('userid'); // 从data-userid属性提取值
  
  $.ajax({
    url: 'data.php',
    type: 'GET',
    data: {id: userId}, // 传递参数
    success: function(response) {
      $('#modalContent').html(response);
    }
  });
});

$.ajax({
  url: 'data.php',
  dataType: 'json',
  success: function(response) {
    $('#modalTitle').text(response.title);
    $('#modalContent').html(response.content);
  }
});

$.ajax({
  url: 'data.php?' + new Date().getTime(),
  cache: false,
  // 其他参数...
});

header("Access-Control-Allow-Origin: *");

$('#modalContent').html('<div class="text-center"><div class="spinner-border" role="status"><span class="sr-only">加载中...</span></div></div>');