In this tutorial you will see the dynamic bootstrap modal popup loading dynamic content through MYSQL database.

First create a table named Post in your MYSQL database and add these fields:-

id
post_title
created_date
author_name
description

and then add some records in the table.

Now We need to create three php files to get dynamic bootstrap modal:-

config.php -In this file we will write the code to make connection with the database.
modal.php – In this file we will write a code to show the post title and view more button which triggers the dynamic modal popup.
ajax.php – This file will receive a unique id when user clicks on any post’s view more button and using that id we will fetch the content from database related to that post and send the content to modal.php file to show that content in the modal body.

Config.php

<?php
   $con=mysqli_connect("localhost","root","","post_database");
?>

<?php

$con=mysqli_connect("localhost","root","","post_database");

Modal.php

<html>
<title>Dynamic Modal</title>
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>

<body>

<?php
require_once('config.php');


$query="select * from posts";
$execute=mysqli_query($con,$query);


?>

<table class="table text-center">
<thead class="thead-dark">
    <tr>
        <th scope="col">#</th>
        <th scope="col">Post Title</th>
        <th>More Details</th>
    </tr>
</thead>
<tbody>

<?php
    while($row=mysqli_fetch_assoc($execute))
    {
?>
        <tr>
            <td><?php echo $row['id']; ?></td>
            <td><?php echo $row['title']; ?></td>
            <td><button type="button" class="btn btn-primary modalButton" data-toggle="modal" data-id="<?php echo $row['id'];?>">
                View More
                </button>
            </td>
        </tr>
<?php
    }

?>
    
</tbody>
</table>

<!--Modal starts Here-->
<div class="modal fade" id="dynamicModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
        
</body>

<script>
$(document).ready(function(){
    $(".modalButton").click(function(){
        var id =$(this).data('id');
        
        $.ajax({
            url:"ajax.php",
            method:"post",
            data:{id:id},
            success:function(response){
                $(".modal-body").html(response);
                $("#dynamicModal").modal('show'); 
            }
        })
    })
})
</script>
</html>

<html>

<title>Dynamic Modal</title>

<head>

</head>

<body>

<?php

require_once('config.php');

$query="select * from posts";

$execute=mysqli_query($con,$query);

<tr>

<th scope="col">Post Title</th>

<th>More Details</th>

</tr>

</thead>

<tbody>

<?php

while($row=mysqli_fetch_assoc($execute))

{

<tr>

</button>

</td>

</tr>

<?php

}

</tbody>

</table>

<h5 class="modal-title">Modal title</h5>

</button>

</div>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

</body>

$(document).ready(function(){

$(".modalButton").click(function(){

var id =$(this).data('id');

$.ajax({

url:"ajax.php",

method:"post",

data:{id:id},

success:function(response){

$(".modal-body").html(response);

$("#dynamicModal").modal('show');

}

})

</script>

</html>

Ajax.php

<?php
require_once('config.php');

$id=$_POST['id'];

$query='select * from posts where id="'.$id.'"';
$execute=mysqli_query($con,$query);

$result=mysqli_fetch_assoc($execute);
$author=$result['author'];
$createdAt=$result['created_at'];
$description=$result['body'];

$response='<form>
                <div class="form-group">
                    <label>Created Date</label>
                    <input type="text" class="form-control" value="'.$createdAt.'" readonly>
                </div>
                <div class="form-group">
                    <label>Author Name</label>
                    <input type="text" class="form-control" value="'.$author.'" readonly>
                </div>
                <div class="form-group">
                    <label>Description</label>
                    <textarea rows="4" cols="50" class="form-control" readonly>'.$description.'</textarea>
                </div>
            </form>';

echo $response;

?>

<?php

require_once('config.php');

$id=$_POST['id'];

$query='select * from posts where id="'.$id.'"';

$execute=mysqli_query($con,$query);

$result=mysqli_fetch_assoc($execute);

$author=$result['author'];

$createdAt=$result['created_at'];

$description=$result['body'];

$response='<form>

<label>Created Date</label>

</div>

<label>Author Name</label>

</div>

<label>Description</label>

<textarea rows="4" cols="50" class="form-control" readonly>'.$description.'</textarea>

</div>

</form>';

echo $response;

Must Read - Related Posts For You:

4 thoughts on “Load Dynamic Content Bootstrap Modal PopUp-Ajax Php Mysql”

kola abbey at 2:46 pm

awesome guildline

Reply ↓
kaushal Gajjar at 3:54 pm

Thanks for share this Code

Reply ↓
Mike at 10:14 am

Finally I got the code. Thanks,I needed it urgently.

Reply ↓
Emiley nathan at 9:50 am

Thank you for sharing such a simple code . It saved my lot of time.

Reply ↓

Must Read - Related Posts For You:

4 thoughts on “Load Dynamic Content Bootstrap Modal PopUp-Ajax Php Mysql”

Leave a Reply Cancel reply