How to Load Dynamic Content in Bootstrap Modal


Creating a modal popup is very easy with Bootstrap. So, if your web application 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 in Bootstrap modal popup. Using our example script, you can pass data, variables, or parameters to external URL and get dynamic content via jQuery Ajax.

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Bootstrap Modal Popup

The following HTML contains a button and 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 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 returns to the Bootstrap modal.

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

Dynamic Bootstrap Modal with Different URL

Using the above examples, now wow we will show how you can load dynamic content from different URL in Bootstrap modal.

HTML Code:
In 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 for 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 specified URL in data-href attribute and opens the Bootstrap modal with this dynamic content.

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

Are you want to get implementation help, or modify or extend the functionality of this script? Submit paid service request

Recommended Tutorials For You

6 Comments

  1. Daryl Snowden Said...
  2. Daryl Snowden Said...
  3. Daryl Snownde Said...
    • CodexWorld Said...
  4. Daryl Snowden Said...
  5. Bachecubano Said...

Leave a reply