How to Show dynamic data on modal popup using php

In this tutorial, we are going to learn about how to show dynamic data on modal popup using PHP MySQL. The Modal is a popup window or dialog box that displayed over the current web page.

Bootstrap and jQuery Library

Before using the Bootstrap to create modal popup, the Bootstrap and jQuery library need to be included first.

<!-- Bootstrap library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- jQuery library -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

Create connection to database in php file.

The mysqli_connect() function opens a new connection to the MySQL server.

<?php $con = mysqli_connect('localhost','root','userName','databaseName'); ?>

Show dynamic data on table.

<table class="table table-bordered table-striped">
   <thead>
      <tr class="btn-primary">
         <th>S.No.</th>
         <th>User Name</th>
         <th>Mobile</th>
         <th>Email</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody>
      <?php 
         $sql = 'SELECT * FROM student'; 
         $result = mysqli_query($con,$sql);
         $i = 1;
         while($row = mysqli_fetch_array($result)) 
         {
         ?>
      <tr>
         <td><?php echo $i; ?></td>
         <td><?php echo $row['user_name']; ?></td>
         <td><?php echo $row['mobile']; ?></td>
         <td><?php echo $row['email']; ?></td>
         <td>
            <!-- here i am creating a button to open a modal popup -->
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal<?php echo $row['id'] ?>">View</button>
         </td>
      </tr>
       <!-- here i am creating a modal popup code.........-->
      <div id="myModal<?php echo $row['id'] ?>" class="modal fade" role="dialog">
         <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Student Details</h4>
               </div>
               <div class="modal-body">
                  <h3>Student Name : <?php echo $row['user_name']; ?></h3>
                  <h3>Phone Number : <?php echo $row['mobile']; ?></h3>
                  <h3>Email : <?php echo $row['email']; ?></h3>
               </div>
            </div>
         </div>
      </div>
     <!--end modal popup code........-->
      <?php 
         $i++;
         }
         ?>
   </tbody>
</table>

1- you have to pass id on button.

Like this :-

<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal<?php echo $row['id'] ?>">View</button>

2 – You have to pass id on modal popup

Like this –

<div id="myModal<?php echo $row['id'] ?>" class="modal fade" role="dialog">

Full code :

<!-- Bootstrap library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<!-- jQuery library -->

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<table class="table table-bordered table-striped">
   <thead>
      <tr class="btn-primary">
         <th>S.No.</th>
         <th>User Name</th>
         <th>Mobile</th>
         <th>Email</th>
         <th>Action</th>
      </tr>
   </thead>
   <tbody>
      <?php 
	     $con = mysqli_connect('localhost','root','userName','databaseName'); 
         $sql = 'SELECT * FROM student'; 
         $result = mysqli_query($con,$sql);
         $i = 1;
         while($row = mysqli_fetch_array($result)) 
         {
         ?>
      <tr>
         <td><?php echo $i; ?></td>
         <td><?php echo $row['user_name']; ?></td>
         <td><?php echo $row['mobile']; ?></td>
         <td><?php echo $row['email']; ?></td>
         <td>
            <!-- here i am creating a button to open a modal popup -->
            <button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal<?php echo $row['id'] ?>">View</button>
         </td>
      </tr>
       <!-- here i am creating a modal popup code.........-->
      <div id="myModal<?php echo $row['id'] ?>" class="modal fade" role="dialog">
         <div class="modal-dialog">
            <div class="modal-content">
               <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Student Details</h4>
               </div>
               <div class="modal-body">
                  <h3>Student Name : <?php echo $row['user_name']; ?></h3>
                  <h3>Phone Number : <?php echo $row['mobile']; ?></h3>
                  <h3>Email : <?php echo $row['email']; ?></h3>
               </div>
            </div>
         </div>
      </div>
     <!--end modal popup code........-->
      <?php 
         $i++;
         }
         ?>
   </tbody>
</table>

Good luck and I hope this article can be useful. See you in the next article…

If you enjoyed this tutorial and learned something from it, please consider sharing it with our friends and followers! Also like to my facebook page to get more awesome tutorial each week!