Bootstrap modal load content dynamically

Today, We want to share with you bootstrap modal load content dynamically.In this post we will show you pass dynamic data to bootstrap modal, hear for Dynamically load content in Bootstrap Modal with AJAX we will give you demo and example for implement.In this post, we will learn about PHP Ajax Display Dynamic MySQL Data in Bootstrap Modal with an example.

How to Load Dynamic Content in Bootstrap Modal?

step 1: Bootstrap and jQuery Library

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

<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>

Bootstrap Modal Popup

Step 2:

<button type="button" class="btn btn-success openBtn">Open Modal</button>

<div class="modal fade" id="loadDataExt" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Modal with Dynamic Content</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Load Content from Another Page in Bootstrap Modal

Step 3: JavaScript Code:

<script>
$('.openBtn').on('click',function(){
    $('.modal-body').load('content.html',function(){
        $('#loadDataExt').modal({show:true});
    });
});
</script>

Load Dynamic Content from Database in Bootstrap Modal

Step 4:

<script>
$('.openBtn').on('click',function(){
    $('.modal-body').load('fetchProduct.php?id=2',function(){
        $('#loadDataExt').modal({show:true});
    });
});
</script>

Dynamic Data using PHP & MySQL:

Example 5: fetchProduct.php file

<?php 
if(!empty($_GET['id'])){ 
    $dbHost = 'localhost'; 
    $dbUsername = 'root'; 
    $dbPassword = 'root'; 
    $dbName = 'pakainfo'; 
      
    $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 
     
    if ($db->connect_error) { 
        die("Unable to connect database: " . $db->connect_error); 
    } 
     
    $query = $db->query("SELECT * FROM wel_content WHERE id = {$_GET['id']}"); 
     
    if($query->num_rows > 0){ 
        $welData = $query->fetch_assoc(); 
        echo '<h5>'.$welData['title'].'</h5>'; 
        echo '<p>'.$welData['content'].'</p>'; 
    }else{ 
        echo 'sorry, Content not found....'; 
    } 
}else{ 
    echo 'Sorry Content not found....'; 
} 
?>

Dynamic Bootstrap Modal with External URL

step 6: JavaScript Code:

<script>
$(document).ready(function(){
    $('.openPopup').on('click',function(){
        var dataURL = $(this).attr('data-href');
        $('.modal-body').load(dataURL,function(){
            $('#loadDataExt').modal({show:true});
        });
    }); 
});
</script>

HTML Code:

step 7:

<a href="javascript:void(0);" data-href="fetchProduct.php?id=1" class="openPopup">About Us</a>

<div class="modal fade" id="loadDataExt" role="dialog">
    <div class="modal-dialog">
    
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h4 class="modal-title">Bootstrap Modal with Dynamic Content</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
      
    </div>
</div>

I hope you get an idea about pass data to bootstrap modal jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.