How to Open Bootstrap Modal Popup on Ajax Click Function

This tutorial will explain to create a Bootstrap Modal popup on click function. When user clicks on a button then a ajax call send request to other page where we have popup modal code, this request can send some data value into that file by POST method and a popup will appear into the current page. This Bootstrap Modal popup opens on any ajax call. Here, we can understand how to load a Bootstrap Modal popup on ajax call. Here you can send some value as parameter to the popup page.

Definition:

The Bootstrap Modal plugin is a popup box which comes on the current page. It is a lightweight multi-purpose JavaScript popup that can be customise according to our need. As it is a bootstarp plugin so it is fully responsive. There is no need to customise more to achieve good popup. This modal popup come with different size so we can use it as per our need. It is a very flexible dialog boxes with header, message body and footer in it. In footer there is action button and a close button.

Bootstrap Modal Section:

There are mainly 3 sections in bootstrap modal popup

Header: In this section, we can give name of that popup followed by a close button. Here, we have a close button so that we can close the popup.

Body: In this section, we can write main content of that popup. Footer: In this section, we have two button. One is the action button of this popup like "submit" and second button is for close the button.

Code Explanation:

Here we need bootstrap JS, CSS file to use any bootstrap plugin. This js and css file have all common features to use for ay plugin. you can download it from here: Download bootstrap JS and CSS file.

Now we have two file
1. index.php
2. load-modal.php

1. index.php

In index.php, we include two js file and one css file.

It also has a button where user will click it and a popup will open on top of this page. When user clicks this button, a ajax request will come into load-modal.php file and it load the contant of load-modal.php file.

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="js/bootstrap.js"></script>

<script type="text/javascript">
$(document).ready(function(){
var $modal = $('#load_popup_modal_show_id');
$('#click_to_load_modal_popup').on('click', function(){
$modal.load('load-modal.php',{'id1': '1', 'id2': '2'},
function(){
$modal.modal('show');
});

});
});

</script>

2. load-modal.php

This file contain the modal code like its header, body, footer etc.

<div id="load_popup_modal_contant" class="" role="dialog">
  <div class="modal-dialog modal-md">
<?php
//$id1 = $_POST["id1"];
//$id2 = $_POST["id2"];
?>
	<form role="form" class="form-inline" role="form" id="form_load_content_id">
    <!-- Start: Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Show Popup Title Here</h4>
      </div>
	    <div id="validation-error"></div>
  <div class="cl"></div>
	    <div class="modal-body">
	<h3> Modal Popup content Here</h3>
      </div>
      <div class="modal-footer">

	  <input name="submit_popup" id="submit_popup" type="button" value="SUBMIT" class="btn btn-primary" />
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	  </form>
      </div>
    </div>
  </div>
  </div>

That's all about Bootstrap Modal Popup. Just download the code and use it. If you have any issue feel free to contact me.

Share this Article on Social Media

All of my Scripts are ready to customized as per your requirement. Feel free to contact for script customization.

Contact me at discussdesk@gmail.com

"Note : It will be charged as per your customization requirement :)"

Get Updates, Scripts & Other Tutorials to Directly to your Email

Over 20000+ Happy Readers already subscribed. (We don't send spam email). Every email subscriber can get our latest updates and download our 100+ scripts.

Comments