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.
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.
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
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.
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">×</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 firstname.lastname@example.org
"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.