Multiple modals with image links and text pop-ups

[ACleite]

Hi!

 

I'm using a slightly modified version of this (https://www.w3schools.com/howto/howto_css_modals.asp) to have a section of a page with image links to text pop-ups. It works great with just one image.

However, I need to have multiple images with different text in the popups. I know it must be a simple fix by using an id or something, but I'm just not figuring it out. I've spent hours on this trying suggestions from different sites around the internet, including this one. None of them work. Part of the issue, perhaps, is that I have to put JavaScript at the top of the page for the Modal script. (No access to the head section.) I do use external CSS and that part seems to be working fine. I'm not using image captions, btw.

Can anyone PLEASE tell me where I'm going wrong? 

************************ Here's the Javascript at the top:

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
           modalRun();
        });

        function modalRun() {
            // Get the modal
            var modal = document.getElementById("myModal"),
            // Get the image and insert it inside the modal
                img = document.getElementsByClassName("imgCB"),
                srcImg = document.getElementsByClassName("srcImg");

            
            $(img).click(function(){
                var source = $(this).attr("src");

                $(modal).css("display", "block");
                $(srcImg).attr("src", source);
            });

            // Get the <span> element that closes the modal
            var close = document.getElementsByClassName("closeModal")[0];
            $(close).click(function() {
                $(modal).css("display", "none");
                $(captionText).empty();
            });

      
            // When the user clicks anywhere outside of the modal, close it
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                    }
                }
        }
// ]]>
    
       </script>
 

************************ 

<div class="imgPicsRow">
    

<div class="imgPic"><img alt="Graphic title." class="imgCB" src="/imagesource.jpg" onclick="document.getElementById('id01')" />
<!-- The Modal -->
    <div id="id01">
<div id="myModal" class="modal">

  <!-- Modal content  - - >
  <div class="modal-content">
    <div class="modal-header">
      <span class="closeModal">&times;</span>
      <h2 style="color: #FFFFFF">Header Title</h2>
    </div>
    <div class="modal-body">
      <p>Text here</p>
      <p>Text here</p>
    </div>
  </div>
</div>
</div>

<div class="imgPic"><img alt="Graphic2 title" class="imgCB" src="/otherimagehere.jpg" onclick="document.getElementById('id02')" />
<!-- The Modal -->
<div id="id02" class="modal">

  <!-- Modal content - - >
  <div class="modal-content" >
    <div class="modal-header">
      <span class="closeModal">&times;</span>
      <h2 style="color: #FFFFFF">Header2 Title</h2>
    </div>
    <div class="modal-body">
      <p>Text 2 here</p>
      <p>Text 2 here</p>
    </div>
  </div>
</div>
</div>
</div>
    

</div>

Edited April 11 by ACleite
typo