Building Dynamic Modals in Bootstrap

A Modal Dialog – The Modal plugin provided by Bootstrap is a dialog box/popup window that is displayed on top of the current page. The fancy, attractive, high functioning version of an alert box. If used properly, modals can be extremely advantageous, can help reduce the number of pages, reduce effort, and looks really good too! And best of all, they have so many use cases.

One could use it for any of the following:

  • Login/Signup
  • Contact Form
  • Feedback Form
  • General Information
  • Confirmation before deleting data/other important action
  • Provide urgent information like session time out
  • Display dynamic content based on user clicks

 

The snippet on Bootstrap doesn’t show us how to activate the modal with dynamic content. Let’s take a simple scenario. Suppose we have a page with many movie titles, and a button each to read the synopsis. Instead of creating individual modals for each (which literally isn’t possible if the data is being fetched from a database), we’ll create one modal with a specific format, and have the content loaded dynamically based on the button click.

In this tutorial, we won’t go through the PHP or the SQL behind it, we’ll focus only on the HTML and AJAX required to get this working.

To help understand the scenario, this is what we’ll attempt:

final
Page Design

 

 

Those who have worked with Bootstrap before, know the the code for those buttons look like something like this:

<a href="#" class="btn btn-primary btn-download" role="button">Get Synopsis</a>

What we’re going to do is add 3 custom attributes:

  • For the modal
    data-toggle="modal"
  • To launch modal with matching ID
    data-target="#showSynopsis"
  • Movie ID
    data-id="<INSERT MOVIE ID DYNAMICALLY>"

 

So, now our button looks like this:

<a href="#" class="btn btn-primary btn-download" role="button" data-toggle="modal" data-target="#showSynopsis" data-id="<INSERT MOVIE ID>">Get Synopsis</a>

 

For the Modal:

As you can see, the body in the above modal is left empty. This is because that content needs to be fetched from the database. What I am going to show you next is how that call to the database is actually made when the modal is called.

The below code needs to be added after all the .js files have been included in your document:

$('#showSynopsis').on('show.bs.modal', function (event) {
	    var clickedLink = $(event.relatedTarget); // clickedLink that triggered the modal
	    var id = clickedLink.data('id'); // Extract info from data-id attributes
	    var modal = $(this);
	    modal.find('.modal-body').load('fetch_synopsis.php',{movie-id:id});
	});

 

All you need now is a PHP file called fetch_synopsis.php that accepts a parater called movie-id which can query the database to return the content for the synopsis.

This can be modified to suit your needs no matter what your application is. Making good use of this trick can increase the user experience tremendously!
You can download the HTML file to try the code yourself from here: Download

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

Up ↑

%d bloggers like this: