It’s not just about whether you can make something happen on any given website, because any good developer knows… you can make anything happen! The real art is how you make it happen, and if youre code looks decent on the back end. 

While your end users and your clients may never see the back-end and don’t care how you make something work, it is important to create code that is easy to edit and easy to follow. This isn’t just a gift that you give your future self in case you ever have to adjust something (especially in bulk and quickly), but also a good standard practice if you work with clients. Eventually, the clients you work with may choose to leave, and you don’t want to spend hours upon hours walking someone else through your code when you are turning it over… or worse… leaving them high and dry with a mess they can’t clean up!

Why do I bring this up? Well, we all find ourselves using a Bootstrap Modal window here and there because frankly, they’re useful! It’s a very simple feature to activate… You add the add the HTML markup for the moda boxl, add a few data attributes to your element and then voila - the modal displays when you click the element.

HOWEVER…

It’s pretty rare when something is that easy. It’s pretty rare, in today’s customizable needs that you only have one clickable element that opens a single set of content in the modal window? What is this? The early 2000’s? Most of the time, the client wants dynamic content...  where we’ve got multiple elements that trigger a modal, with each element needing to display different content inside the modal window. How can we solve that problem?

While we technically could add multiple modal windows, that is a horrible amount of duplication and leads to incredibly untidy and messy code. Imagine having to update all of those modal windows if you had to change your brand colors or products. You might have 20 links that need to trigger a modal window, and adding HTML code for 20 modal windows on your page will create a lot of unnecessary code.

So what’s the more elegant approach? I recommend having all elements trigger a single shared modal window that simply takes whatever content you need right before opening. Thus creating a nice clean execution of multiple modal windows with just one set of HTML.

For a quick example, let’s take a look at this set of links...

<a href="#">First item</a>
<a href="#">Second item</a>
<a href="#">Third item</a>
<a href="#">Fourth item</a>
<a href="#">Fifth item</a>   

When each link is clicked, we will display a unique title and some unique text inside the modal window.

The next thing we need is the HTML for the modal, which could look something like this...

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body"></div>
        </div>
    </div>
</div>

*** Notice that we have left the <h5 class=”modal-title”> and the <div class=”modal-body”> elements empty, since these will hold the unique inserted title and text. That’s the dynamic part.***

The key to this solution is data attributes and javascript. First we add our unique titles and text to each link inside data attributes, like so...

<a href="#" data-title="First item" data-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">First item</a>
<a href="#" data-title="Second item" data-content="Aenean at sem a magna pellentesque tincidunt.">Second item</a>
<a href="#" data-title="Third item" data-content="Curabitur ligula lorem, egestas at erat ut, dictum varius nisl.">Third item</a>
<a href="#" data-title="Fourth item" data-content="Vestibulum lacus justo, egestas sit amet elit vitae, mattis feugiat nulla.">Fourth item</a>
<a href="#" data-title="Fifth item" data-content="Aliquam erat volutpat.">Fifth item</a>  

Then we add some javascript to hook into the bootstrap modal show event, so that just before the modal popup is displayed, we set the title and text inside the modal.

$('#exampleModal').on('show.bs.modal', function (event) {
    var title = $(event.relatedTarget).data('title');
    var text = $(event.relatedTarget).data('content');
    $(this).find('.modal-title').html(title);
    $(this).find('.modal-body').html(text);
});

And that’s it! You’ve got a dynamic modal popup that responds to the specific content needs depending on the link. Easy to read, easy to explain, and even easier to update if you ever need to come back to it. All we’re doing here is assigning the title and text data to variables and then injecting them into the relevant areas of the modal window, so the final result, when you click each link, you see the unique content for  just that link.

It’s not always simpler to do it the long way, you may save yourself time now and in the future by just taking a bit more time in the planning stages and finding not just the fastest and easiest way to make something happen, but also the most efficient.