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:
- 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:
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
- To launch modal with matching ID
- 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:
%d bloggers like this: