I'm building a CRM that contains lots of bootstrap modals to show details of transactions, profile details and more. I embedded the modal in my PHP while loop and everything works fine for all PC browsers and android browsers, problem is IOS devices display the models differently. the close modal button doesn't work on any IOS device and i cant even close the modal on IOS devices. Please can someone help on how to go about it. This is what I have so far.
<?php
$sql1 = "SELECT * FROM transactions where user = '{$id}'";
$result1 = $conn->query($sql1);
i= 0;
while ($trans = mysqli_fetch_array($result1)){
$tid = $trans['id'];
$status = $trans['status'];
$type = $trans['type'];
$amount = number_format($trans['value']);
$reason = $trans['reason'];
$receive = number_format($trans['receive_amount']);
$date = $trans['date'];
}
echo"
<tr>
<td>$tid</td>
<td class='sorting_1'><i class='$class'></i><span>$stat</span></td>
<td>$type</td>
<td>$ $amount</td>
<td>$receive</td>
<td>$date</td>
<td>
<a href='#'><i class='$class2' id='$pending' data-toggle='$toggle' data-target='$target$i'></i></a>
</td>
</tr>";?>
<!--Success theme Modal -->
<div class="modal fade text-left" id="paid<?php echo $i ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel110" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header bg-success">
<h5 class="modal-title white" id="myModalLabel110">Transaction Has Been Paid</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="bx bx-x"></i>
</button>
</div>
<div class="modal-body">
<dl class="row mt-5">
<dt class="col-sm-6 h4">Name Surname:</dt>
<dd class="col-sm-6 h4 text-white"><?php echo $user->get_full_name($id) ?></dd>
</dl>
<hr>
<dl class="row">
<dt class="col-sm-6 h4">Type:</dt>
<dd class="col-sm-6 h4 text-white"><?php echo $type ?></dd>
</dl>
<hr>
<dl class="row">
<dt class="col-sm-6 h4">Date:</dt>
<dd class="col-sm-6 h4 text-white"><?php echo $date ?></dd>
</dl>
<hr>
<dl class="row">
<dt class="col-sm-6 h4">Amount Received:</dt>
<dd class="col-sm-6 h4 text-white">$ <?php echo $amount ?></dd>
</dl>
<hr>
<dl class="row">
<dt class="col-sm-6 h4">Total Amount Paid:</dt>
<dd class="col-sm-6 h4 text-white">NGN <?php echo $receive ?></dd>
</dl>
<hr>
<img class="img-fluid" src="../<?php echo $newapprove ?>" alt="Screenshot was not uploaded">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-secondary" data-dismiss="modal">
<i class="bx bx-x d-block d-sm-none"></i>
<span class="d-none d-sm-block">Close</span>
</button>
</div>
</div>
</div>
</div>
<?php
$i++;
};
?>
Apologies for my code length
Solved this by adding
data-backdrop="false"
in the modal div