Create dynamic content popup using bootstrap modal and jquery

0 210

This is tutorial about creating dynamic content popup using bootstrap modal and jquery, Most of the time you need to add popup dialog box where you have to display different different content or forms, If any application needs so many popups then many young developers create many popups for each action. Here i’ll show you how can we make dynamic popups for all your dynamic content. You have to write popups codes only once and same popup will load different content for different action.

Below I am going to create a three buttons About Us, Contact Us, & Our Team, If you click about us button a about us content popup will open, same if you click contact us button a contact us popup will open and so on.. But popup generation code is same for all buttons. I used single bootstrap modal for all popup action, So this tutorial is very useful for young developer who writes popup codes so many times in their application.You can also use this techniques to create your one page popup based applications.

 

First of all create simple html page and include bootstrap css and js library and don’t forget to include jquery library before bootstrap js library on page.

index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
 integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
 crossorigin="anonymous">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" 
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
</script>

In this sample demo i created three buttons on index.html page and added pageTitle and pageName custom attribute on button tag. so that you’ll able to put dynamic popup title and page content.

<button class="btn btn-primary btn-lg pop" pageTitle="About Us" pageName="about.html" >
About us</button> | 
<button class="btn btn-primary btn-lg pop" pageTitle="Contact Us" pageName="contact.html" >
Contact Us</button> | 
<button class="btn btn-primary btn-lg pop" pageTitle="Our Team" pageName="team.html">Our Team</button>

Add bootstrap modal code on your main page with empty title and body content. The title and body content will be generate at the time of user action.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title"></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><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

 

Finally add simple jquery code snippets to generate dynamic bootstrap modal. In below code you see i added same pop class one my three buttons so when ever user click on any button below function get custom pageTitle and pageName tag and set it for the popup, You also have to create page for about us contact us and our team page which will be loaded by on click event using jquery load function.

<script>
	$(function() {
        $(".pop").click(function(){
          var pageTitle = $(this).attr('pageTitle');
          var pageName = $(this).attr('pageName');
          $(".modal .modal-title").html(pageTitle);
          $(".modal .modal-body").html("Content loading please wait...");
          $(".modal").modal("show");
          $(".modal .modal-body").load(pageName);
        });
	});	
</script>

The above function get dynamic parameter like pageTitle and pageName when ever user click on any button, which need to load dynamically and have to display on popup.


DEMO

 

Download

If you like this post please don’t forget to subscribe my public notebook for more useful stuff

Leave A Reply

Your email address will not be published.