-1

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

dceekay
  • 7
  • 6
  • **Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) – Dharman Sep 07 '21 at 09:21

1 Answers1

0

Solved this by adding

data-backdrop="false"

in the modal div

dceekay
  • 7
  • 6