如何点击按钮在index.php弹出modal2模态框而非跳转新页面

原代码失效核心原因：锚点#后直接拼接查询参数不符合URL规范，浏览器无法识别为模态框触发指令，且没有配置异步加载book.php内容的逻辑，点击后会直接走原生链接跳转逻辑打开独立页面。

1. 调整日历Book按钮输出代码 #

移除原有无效的href锚点写法，用自定义属性存储选中日期，添加事件绑定钩子，阻止默认跳转行为：

$calendar.="<td class='$today'><h4>$currentDay</h4>
   <a href='javascript:void(0)' class='btn btn-success btn-xs book-btn' data-date='".$date."'>Book</a>";

• book-btn：后续JS事件绑定的专属类名
• data-date：存储当前点击日期，异步请求时传给book.php生成对应时间段

2. 在index.php中预置modal2结构 #

提前写好模态框的固定外壳，预留内容容器用来动态加载book.php返回的时间段选择内容：

<div class="modal fade" id="modal2" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">选择预约时间段</h4>
      </div>
      <div class="modal-body" id="modal2-content">
        <div class="text-center">加载中...</div>
      </div>
    </div>
  </div>
</div>

如果你用的是Bootstrap模态框组件，上述结构可以直接用，不需要额外改样式；如果是自定义模态框，把默认隐藏、弹出/关闭的逻辑对应上即可。

3. 绑定按钮点击事件，异步加载内容后唤起模态框 #

基于项目已引入的jQuery（Bootstrap依赖自带）写事件逻辑，点击按钮时异步拉取对应日期的时间段内容，加载完成后弹出模态框：

// 用事件委托绑定，适配日历动态渲染的场景
$(document).on('click', '.book-btn', function() {
  const selectDate = $(this).data('date');
  const $modal = $('#modal2');
  // 重置加载状态
  $modal.find('#modal2-content').html('<div class="text-center">加载中...</div>');
  // 请求book.php拿到对应日期的时间段页面
  $.get('book.php', {date: selectDate}, function(response) {
    $modal.find('#modal2-content').html(response);
    // 内容加载完成后弹出模态框
    $modal.modal('show');
  }).fail(function() {
    $modal.find('#modal2-content').html('<div class="text-center text-danger">时间段加载失败，请重试</div>');
  });
});

4. 可选优化：表单无刷新提交 #

如果不想提交预约时刷新页面，可以给modal2里book.php渲染的表单加异步提交逻辑，提交成功后关闭模态框、局部刷新日历的预约状态即可，不做这个优化也不影响模态框唤起的核心功能。

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