How can i get multiple modals?

Question

I am using a loop to generate elements from a YML file, and for each element I want to be able to click on them and have different content outlined in the YML file. However when clicking on the first element it works, but when clicking on any other element in the page the modal no longer even appears.

{% for company in site.data.stories %}
    <div class="col-md-6 col-sm-6  col-xs-12 company" style="height: 600px;">
        <div class="img-container">

            <!-- Trigger/Open The Modal -->
            <button id="myBtn">
            <img class="center" style="width: 486px; height: 364.5px;" id="{{company.image_url}}" src="/assets/img/stories/{{company.image_url}}.png" alt="{{company.name}}"></button>

            <!-- The Modal -->
            <div id="myModal" class="modal">
            <!-- Modal content -->
            <div class="modal-content">
            <div class="modal-header">
                <span class="close">&times;</span>
                <h2>{{company.name}}</h2>
            </div>
            <div class="modal-body">
                <strong>Date of Event: </strong>{{company.date_of_event}}
                <p>{{company.fullstory}}</p>
            </div>
            <div class="modal-footer">
            <h3>The End</h3>
            </div>
            </div>
            </div>
        </div>

            <h3><a href="{{company.site_url}}" class="center">{{company.name}}</a></h3> 
            <p><b>Date of Event: </b> {{company.date_of_event}}</p>
            <p>{{company.description}}</p>
    </div>
    {% endfor %}

Java Script:

<script> // Modal Script
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
btn.onclick = function() {modal.style.display = "block";}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {modal.style.display = "none";}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {if (event.target == modal) {modal.style.display = "none";}}
</script>

Each element in the YML file is outlined like this:

name: The Delgado Household Story
  description: The Joy Project helps a single mother of eight with time and donations.
  image_url: delgado_photo2
  site_url: #
  date_of_event: Coming Soon...
  width: 90
  margin: 5
  fullstory: 

Answer 1

You will have to rename each modal ID something different, right now they are all being dynamically generated with ID myModal. Also the buttons that trigger each modal will have to know which modal to fire also. You could set the ID's of the modal to something specific to each set of data, like the name or add a unique ID property to each record.

To save loading a bunch of modals... Instead of dynamically creating the modals based off of your data (reuse of the ID myModal), it may be a good idea to try and reuse a single modal and dynamically add the content to that modal depending on the content clicked. You could still load all the company data one-by-one (leave the modal out of the for loop in html), then when the modal button is clicked, inject the rest of the data to be displayed inside the modal.

{% for company in site.data.stories %}
<div class="col-md-6 col-sm-6  col-xs-12 company" style="height: 600px;">
    <div class="img-container">

        <!-- Trigger/Open The Modal -->
        <button id="{{company.uniqueID}}">
        <img class="center" style="width: 486px; height: 364.5px;" id="{{company.image_url}}" src="/assets/img/stories/{{company.image_url}}.png" alt="{{company.name}}"></button>
    </div>

        <h3><a href="{{company.site_url}}" class="center">{{company.name}}</a></h3> 
        <p><b>Date of Event: </b> {{company.date_of_event}}</p>
        <p>{{company.description}}</p>
</div>
{% endfor %}


<!-- The Modal -->
<div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
            <span class="close">&times;</span>
            <h2>{{company.name}}</h2>
        </div>
        <div class="modal-body">
            <strong>Date of Event: </strong>{{company.date_of_event}}
            <p>{{company.fullstory}}</p>
        </div>
        <div class="modal-footer">
            <h3>The End</h3>
        </div>
    </div>
</div>

Note: You might have to think about how to structure the data differently. Maybe giving each button a unique ID and fetching the data related to that unique ID, <button id="{{company.uniqueID}}">.

You could also set the ID fetching based off of the name "The Delgado Household Story", etc... <button id="{{company.name}}">, then inject based off of the button ID, something like get button ID name, find and match name in dataset, then set modal data based off of properties in that 'name'