Dynamic Content Modal via AJAX with jQuery

In this tutorial, we are going to load dynamic content for a jQuery modal via an AJAX request. I have added an example for loading dynamic content by requesting a PHP file via an AJAX call. In this PHP file, I have declared a content array containing the dynamic data to be loaded to the jQuery modal window. I use jQuery UI library for showing a DIV element as a modal dialog. In a previous tutorial, we have seen how to initialize and open jQuery modal dialog with static content.

Modal Window

I use jQuery load() function by passing the PHP file path to get the dynamic content. This function loads the dynamic content to the target DIV element after getting the AJAX response successfully. Then the target DIV element will be shown as a jQuery dialog window by initializing dialog with the required options. In this example, I set the modal option as true and also setting the height and width of the modal window.  

View Demo

HTML Elements for Handling Dialog

The following HTML code shows the HTML button elements that triggers modal dialog. This code has a target DIV element to load dynamic data and open it in a modal window using the jQuery dialog() function.

<div id="demo-modal-target">
	<div class="demo-title">Demo Open Modal Window</div>
	<div onclick="loadDynamicContentModal('jquery')"
		class="btn-modal-target" id="btn-jquery">jQuery</div>
	<div onclick="loadDynamicContentModal('bootstrap')"
		class="btn-modal-target" id="btn-bootstrap">Bootstrap</div>
	<div onclick="loadDynamicContentModal('responsive')"
		class="btn-modal-target" id="btn-responsive">Responsive</div>
</div>
<div id="demo-modal"></div>

jQuery Script to Load Dynamic Content

This jQuery function receives the key for requesting the dynamic content from the PHP file. The PHP file receives this key and returns the corresponding value associated with this key as an AJAX response. The jQuery load() function loads the dynamic content to the target DIV. With the reference of the target DIV element id, the dialog function is initialized with a set of options. After initializing dialog we open the target DIV as a jQuery dialog window.

<script>
function loadDynamicContentModal(modal){
	var options = {
			modal: true,
			height:300,
			width:500
		};
	$('#demo-modal').load('get-dynamic-content.php?modal='+modal).dialog(options).dialog('open');
}
</script>

jQuery Modal Dialog Output

dynamic-content-modal-via-ajax-with-jquery-output

The code for the PHP file containing the dynamic array data is

<?php
	$dynamic_content_array = array(
			"jquery" => "<img src='jquery-logo.jpg' /><div class='modal-text'>jQuery is a Javascript library provides API functions for handling events with animation effects.</div>",
			"bootstrap" => "<img src='bootstrap-logo.jpg' /><div class='modal-text'>Bootstrap is a popular framework helps in fast and furious web developement.</div>",
			"responsive" => "<img src='responsive.jpg' /><div class='modal-text'>Web design methodology used to make the page content responsive to the size of various viewport.</div>"
	);
	
	if(!empty($_GET["modal"])) {
		print $dynamic_content_array[$_GET["modal"]];
	}
?>

View DemoDownload

This jQuery code tutorial was published on May 21, 2017.

↑ Back to Top