The Modal<\/b> 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.<\/p>\n
Creating a modal popup is very easy with the Bootstrap modal<\/b> component. So, if your web application already uses Bootstrap, it\u2019s 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<\/b>.<\/p>\n
In this tutorial, we will show how you can load content from an external URL in Bootstrap modal popup<\/b>. 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.<\/p>\nBootstrap and jQuery Library<\/h2>\n
Before using the Bootstrap to create a modal popup, include the Bootstrap and jQuery library first.<\/p>\n
<!-- jQuery library --><\/span>\r\n<script<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.4.1\/jquery.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span>\r\n\r\n<!-- Bootstrap library --><\/span>\r\n<link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css\"<\/span>><\/span>\r\n<script<\/span> src<\/span>=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/js\/bootstrap.min.js\"<\/span>><\/span><\/span><\/script<\/span>><\/span><\/pre>\nBootstrap Modal Popup<\/h2>\n
The following HTML contains a button and a modal dialog. This button (.openBtn<\/code>) triggers the Bootstrap modal for showing the content from another file.<\/p>\n<!-- Trigger the modal with a button --><\/span>\r\n<button<\/span> type<\/span>=\"button\"<\/span> class<\/span>=\"btn btn-success openBtn\"<\/span>>Open Modal<\/button<\/span>>\r\n\r\n<!-- Modal --><\/span>\r\n<div<\/span> class<\/span>=\"modal fade\"<\/span> id<\/span>=<\/span>\"myModal\"<\/span> role<\/span>=\"dialog\"<\/span>>\r\n <div<\/span> class<\/span>=\"modal-dialog\"<\/span>>\r\n <!-- Modal content--><\/span>\r\n <div<\/span> class<\/span>=\"modal-content\"<\/span>>\r\n <div<\/span> class<\/span>=\"modal-header\"<\/span>>\r\n <button<\/span> type<\/span>=\"button\"<\/span> class<\/span>=\"close\"<\/span> data-dismiss<\/span>=\"modal\"<\/span>>×<\/span><\/button<\/span>>\r\n <h4<\/span> class<\/span>=\"modal-title\"<\/span>>Modal with Dynamic Content<\/h4<\/span>>\r\n <\/div<\/span>>\r\n <div<\/span> class<\/span>=\"modal-body\"<\/span>>\r\n\r\n <\/div<\/span>>\r\n <div<\/span> class<\/span>=\"modal-footer\"<\/span>>\r\n <button<\/span> type<\/span>=\"button\"<\/span> class<\/span>=\"btn btn-default\"<\/span> data-dismiss<\/span>=\"modal\"<\/span>>Close<\/button<\/span>>\r\n <\/div<\/span>>\r\n <\/div<\/span>>\r\n <\/div<\/span>>\r\n<\/div<\/span>>\r\n<\/pre>\nLoad Content from Another Page in Bootstrap Modal<\/h2>\n
This example shows how to load the content from an external URL in the Bootstrap modal popup.<\/p>\n
JavaScript Code:<\/b>
\nBy clicking the Open Modal (.openBtn<\/code>) button, the content is loaded from another page (content.html<\/code>) and shows on the modal popup (#myModal<\/code>).<\/p>\n<script<\/span>><\/span>\r\n$('.openBtn'<\/span>).on('click'<\/span>,function<\/span>(<\/span>)<\/span>{\r\n $('.modal-body'<\/span>).load('content.html'<\/span>,function<\/span>(<\/span>)<\/span>{\r\n $('#myModal'<\/span>).modal({show:true<\/span>});\r\n });\r\n});<\/span>\r\n<\/script<\/span>><\/span><\/pre>\nLoad Dynamic Content from Database in Bootstrap Modal<\/h2>\n
This example shows how to load the dynamic content based on parameter pass into the external URL using PHP and MySQL.<\/p>\n
JavaScript Code:
\nBy clicking the Open Modal (.openBtn<\/code>) button, the dynamic content is loaded from another PHP file (getContent.php<\/code>) based on the ID and shows on the modal popup (#myModal<\/code>).<\/p>\n<script<\/span>><\/span>\r\n$('.openBtn'<\/span>).on('click'<\/span>,function<\/span>(<\/span>)<\/span>{\r\n $('.modal-body'<\/span>).load('getContent.php?id=2'<\/span>,function<\/span>(<\/span>)<\/span>{\r\n $('#myModal'<\/span>).modal({show:true<\/span>});\r\n });\r\n});<\/span>\r\n<\/script<\/span>><\/span><\/pre>\nDynamic Data using PHP & MySQL:<\/b>
\nIn the getContent.php<\/code> file, the requested data is fetched from the database using PHP and MySQL. The dynamic content is rendered and return to the Bootstrap modal.<\/p>\n<?php
<\/span>if(!empty(<\/span>$_GET<\/span>[<\/span>'id'<\/span>])){
<\/span>\/\/ Database configuration
<\/span>$dbHost <\/span>= <\/span>'localhost'<\/span>;
<\/span>$dbUsername <\/span>= <\/span>'root'<\/span>;
<\/span>$dbPassword <\/span>= <\/span>'root'<\/span>;
<\/span>$dbName <\/span>= <\/span>'codexworld'<\/span>;
<\/span>\/\/ Create connection and select database
<\/span>$db <\/span>= new <\/span>mysqli<\/span>(<\/span>$dbHost<\/span>, <\/span>$dbUsername<\/span>, <\/span>$dbPassword<\/span>, <\/span>$dbName<\/span>);
if (<\/span>$db<\/span>-><\/span>connect_error<\/span>) {
die(<\/span>\"Unable to connect database: \" <\/span>. <\/span>$db<\/span>-><\/span>connect_error<\/span>);
}
<\/span>\/\/ Get content from the database
<\/span>$query <\/span>= <\/span>$db<\/span>-><\/span>query<\/span>(<\/span>\"SELECT * FROM cms_content WHERE id = <\/span>{<\/span>$_GET<\/span>[<\/span>'id'<\/span>]}<\/span>\"<\/span>);
if(<\/span>$query<\/span>-><\/span>num_rows <\/span>> <\/span>0<\/span>){
<\/span>$cmsData <\/span>= <\/span>$query<\/span>-><\/span>fetch_assoc<\/span>();
echo <\/span>'<h5>'<\/span>.<\/span>$cmsData<\/span>[<\/span>'title'<\/span>].<\/span>'<\/h5>'<\/span>;
echo <\/span>'<p>'<\/span>.<\/span>$cmsData<\/span>[<\/span>'content'<\/span>].<\/span>'<\/p>'<\/span>;
}else{
echo <\/span>'Content not found....'<\/span>;
}
}else{
echo <\/span>'Content not found....'<\/span>;
}
<\/span>?><\/span><\/pre>\nDynamic Bootstrap Modal with External URL<\/h2>\n
This example shows how you can load dynamic content from an external URL in the Bootstrap modal.<\/p>\n
HTML Code:<\/b>
\nIn the data-href<\/code> 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.<\/p>\n<a<\/span> href<\/span>=\"javascript:void(0);\"<\/span> data-href<\/span>=\"getContent.php?id=1\"<\/span> class<\/span>=\"openPopup\"<\/span>>About Us<\/a<\/span>>\r\n\r\n<!-- Modal --><\/span>\r\n<div<\/span> class<\/span>=\"modal fade\"<\/span> id<\/span>=<\/span>\"myModal\"<\/span> role<\/span>=\"dialog\"<\/span>>\r\n <div<\/span> class<\/span>=\"modal-dialog\"<\/span>>\r\n \r\n <!-- Modal content--><\/span>\r\n <div<\/span>