How to Load Dynamic Content in Bootstrap Modal

The Modal is a popup window or dialog box that displayed over the current web page. It is very useful to display HTML content/elements on a single page. If your web application uses Bootstrap, the modal popup can be easily implemented on the web pages. Bootstrap’s modal plugin helps to add a dialog window to the website site for lightboxes, popup elements, or custom content.

Creating a modal popup is very easy with the Bootstrap modal component. So, if your web application already uses Bootstrap, it’s always a good idea to use Bootstrap for populating modal dialog. Because it does not require any third-party jQuery plugin. Not only the static content but also you can load external URL or dynamic content in a modal popup with Bootstrap.

In this tutorial, we will show how you can load content from an external URL in Bootstrap modal popup. Also, you will know how to load dynamic content from another page via jQuery Ajax and display it in Bootstrap modal popup. Using our example script, you can pass data, variables, or parameters to the external URL and get dynamic content via jQuery Ajax.

Bootstrap and jQuery Library

Before using the Bootstrap to create a modal popup, include the Bootstrap and jQuery library first.

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

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

Bootstrap Modal Popup

The following HTML contains a button and a modal dialog. This button (.openBtn) triggers the Bootstrap modal for showing the content from another file.

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-success openBtn">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</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

This example shows how to load the content from an external URL in the Bootstrap modal popup.

JavaScript Code:
By clicking the Open Modal (.openBtn) button, the content is loaded from another page (content.html) and shows on the modal popup (#myModal).

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

Load Dynamic Content from Database in Bootstrap Modal

This example shows how to load the dynamic content based on parameter pass into the external URL using PHP and MySQL.

JavaScript Code:
By clicking the Open Modal (.openBtn) button, the dynamic content is loaded from another PHP file (getContent.php) based on the ID and shows on the modal popup (#myModal).

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

Dynamic Data using PHP & MySQL:
In the getContent.php file, the requested data is fetched from the database using PHP and MySQL. The dynamic content is rendered and return to the Bootstrap modal.

<?php 
if(!empty($_GET['id'])){ 
    // Database configuration 
    $dbHost = 'localhost'; 
    $dbUsername = 'root'; 
    $dbPassword = 'root'; 
    $dbName = 'codexworld'; 
     
    // Create connection and select database 
    $db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 
     
    if ($db->connect_error) { 
        die("Unable to connect database: " . $db->connect_error); 
    } 
     
    // Get content from the database 
    $query = $db->query("SELECT * FROM cms_content WHERE id = {$_GET['id']}"); 
     
    if($query->num_rows > 0){ 
        $cmsData = $query->fetch_assoc(); 
        echo '<h5>'.$cmsData['title'].'</h5>'; 
        echo '<p>'.$cmsData['content'].'</p>'; 
    }else{ 
        echo 'Content not found....'; 
    } 
}else{ 
    echo 'Content not found....'; 
} 
?>

Dynamic Bootstrap Modal with External URL

This example shows how you can load dynamic content from an external URL in the Bootstrap modal.

HTML Code:
In the data-href attribute, the URL needs to be specified, from where you want to load the content. Also, add the openPopup class to the link to trigger the Bootstrap modal dialog.

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

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</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>

JavaScript Code:
The following jQuery automatically loads the content from the specified URL in the data-href attribute and opens the Bootstrap modal with this dynamic content.

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

Bootstrap Modal Popup Form Submit with Ajax & PHP