PHP循环嵌入Bootstrap模态框后IOS设备无法关闭问题求助

首先修复代码逻辑错误 #

现有代码存在2处基础语法/逻辑问题，会导致模态框绑定异常：

• 循环计数器未正确声明：将i= 0;修改为$i = 0;
• 循环作用域错误：现有while循环仅包住了数据库字段赋值的代码，输出表格行、模态框的代码都在循环外，导致所有模态框的内容、ID都只对应最后一条交易记录。需要把输出表格、模态框的代码全部移入while循环的大括号内。
• 模态框ID属性重复：所有模态框的aria-labelledby属性和标题ID都固定为myModalLabel110，需改为随循环计数变化的唯一值，示例如下：

<h5 class="modal-title white" id="myModalLabel<?php echo $i; ?>">Transaction Has Been Paid</h5>

对应模态框外层标签修改为：

<div class="modal fade text-left" id="paid<?php echo $i ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel<?php echo $i; ?>" aria-hidden="true">

修复iOS端兼容问题 #

iOS Safari对无明确点击样式的元素会默认拦截点击事件，是导致Bootstrap模态框关闭失效的核心原因，可通过以下方案修复：

1. 添加CSS兼容样式
   给所有带关闭属性的元素添加可点击标识，触发Safari的点击事件识别：

[data-dismiss="modal"] {
    cursor: pointer;
    touch-action: manipulation;
    position: relative;
    z-index: 1056;
}

该z-index值高于Bootstrap默认的模态框遮罩层级（1055），可避免遮罩挡住关闭按钮的问题。

2. 添加JS兼容逻辑
   如果CSS修改后仍有问题，添加全局监听事件主动触发模态框关闭：

$(document).on('click touchend', '[data-dismiss="modal"]', function (e) {
    e.preventDefault();
    $(this).closest('.modal').modal('hide');
});

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