title: JavaScript Image Modal Not Opening
body: <p>I am working on a class assignment and struggling with creating a JavaScript Image Modal. </p>
  
  <p>I was able to get the images to appear clickable but they do not open up into a modal. I am very unclear as to which part of my code is incorrect. </p>
  
  <p>I am using code straight from W3Schools Modal tutorial but to no avail. Any help would be much appreciated! </p>
  
  <p>Below I have included all of my code (CSS, JS, and EJS) for viewing. I am curious if maybe the code is messing up because I am using both a Bootstrap Jumbotron and a Bootstrap grid system for these images to be formatted well and more eye-pleasing. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>        //get modal
          var modal = document.getElementById('myModal');
          //get the image and insert it into modal - use its "alt" text as caption
          var img = document.getElementsByClassName('portfolioImages');
          var modalImg = document.getElementById("img01");
          var captionText = document.getElementById("caption");
          img.onclick = function() {
            modal.style.display = "block";
            modalImg.src = this.src;
            captionText.innerHTML = this.addEventListener;
          }
          //Get the &lt;span&gt; element that closes the modal
          var span = document.getElementById("close")[0];
          //When the user clicks on &lt;span&gt; (x), close the modal
          span.onclick = function() {
            modal.style.display="none";
          }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>     /* Style image used to trigger modal */
      .portfolioImages {
          border-radius: 5px;
          cursor: pointer;
          transition: 0.3s;
      }
  
      .portfolioImages:hover {opacity: 0.7;}
  
      /* The Modal (background) */
      .modal {
          display: none;
          position: fixed; 
          z-index: 1;
          padding-top: 100px;
          left:0;
          top:0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgb(0,0,0);
          background-color: rgba(0,0,0,0.9);
      }
  
      /*Modal Content (Image) */
      .modal-content {
          margin: auto;
          display: block;
          width: 80%;
          max-width: 700px; 
      }
  
      /*Caption of Modal Image*/
      #caption {
          margin: auto;
          display: block;
          width: 80%;
          max-width: 700px;
          text-align: center;
          color: #ccc;
          padding: 10px 0;
          height: 150px;
      }
  
      /* Add Animation - Zoom in the Modal*/
      .modal-content, #caption {
          animation-name: zoom;
          animation-duration: 0.6s;
      }
  
      @keyframes zoom {
          from {transform: scale(0)}
          to {transform: scale(1)}
      }
  
      /* The close button */
      .close {
          position: absolute;
          top: 15px;
          right: 35px; 
          color: #f1f1f1;
          font-size: 40px;
          font-weight: bold;
          transition: 0.3s;
      }
  
      .close:hover, .close:focus {
          color: #bbb;
          text-decoration: none;
          cursor: pointer;
      }
  
          </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;div class="jumbotron" id="skills"&gt;
          &lt;h1&gt;Check Out My Design Work: &lt;a href="https://www.slideshare.net/AmyWhite95"&gt;&lt;img src='images/slideshow.jpg' height="100px"
                      width="100px" /&gt;&lt;/a&gt;&lt;/h1&gt;
          &lt;br /&gt;
          &lt;!--Trigger Modal--&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="column"&gt;
                      &lt;div class="Incontent"&gt;
                          &lt;img class="portfolioImages" src="images/Cards1.JPG" alt="Card Design" style="width:100%" height="500px"&gt;
                          &lt;h3&gt;Card Design&lt;/h3&gt;
                          &lt;p&gt;This was for a project in Typography I. The goal was to design and print a deck of cards
                              along with a box.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="column"&gt;
                      &lt;div class="Incontent"&gt;
                          &lt;img class="portfolioImages" src="images/FrontPageNewsWhite.jpg" alt="Newspaper Design" style="width:100%" height="500px"&gt;
                          &lt;h3&gt;Newspaper Design&lt;/h3&gt;
                          &lt;p&gt;This was a project for Media Design. The goal was to design the front page of a magazine
                              with good headlines and layout.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="column"&gt;
                      &lt;div class="Incontent"&gt;
                          &lt;img class="portfolioImages" src="images/WhiteAInfographic.jpg" alt="Infographic Design" style="width:100%" height="500px"&gt;
                          &lt;h3&gt;Infographic&lt;/h3&gt;
                          &lt;p&gt;This was a project for Media Design. The goal was to design a well titled and laid out
                              infographic.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="column"&gt;
                      &lt;div class="Incontent"&gt;
                          &lt;img class="portfolioImages" src="images/vectorgirlJPG.jpg" alt="Vector Design" style="width:100%" height="500px"&gt;
                          &lt;h3&gt;Vector Design&lt;/h3&gt;
                          &lt;p&gt;This was a project for Computer Graphics I. The goal was to vectorize a portrait with
                              Adobe
                              Illustrator.&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="column"&gt;
                  &lt;div class="Outcontent"&gt;
                      &lt;img class="portfolioImages" src="images/WhiteAWebsite.jpg" alt="Website Design" style="width:100%" height="500px"&gt;
                      &lt;h3&gt;Website Design&lt;/h3&gt;
                      &lt;p&gt;This was for a project in Media Design. The goal was to re-design a bad website.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="column"&gt;
                  &lt;div class="Outcontent"&gt;
                      &lt;img class="portfolioImages" src="images/SpecSheet1.JPG" alt="Spec Sheet Front" style="width:100%" height="500px"&gt;
                      &lt;h3&gt;Spec Sheet (Front)&lt;/h3&gt;
                      &lt;p&gt;This was a project for Typography I. The goal was to design a spec sheet with provided
                          material.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="column"&gt;
                  &lt;div class="Outcontent"&gt;
                      &lt;img class="portfolioImages" src="images/SpecSheet2.JPG" alt="Spec Sheet Design Back" style="width:100%" height="500px"&gt;
                      &lt;h3&gt;Spec Sheet (Back)&lt;/h3&gt;
                      &lt;p&gt;This was a project for Typography I. The goal was to design a spec sheet with provided
                          material.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="column"&gt;
                  &lt;div class="Outcontent"&gt;
                      &lt;img class="portfolioImages" src="images/TypeForm.JPG" alt="Type Form Design" style="width:100%" height="500px"&gt;
                      &lt;h3&gt;Type Form Design&lt;/h3&gt;
                      &lt;p&gt;This was a project for Typography I. The goal was to create a design using only our
                          initials.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- The Modal --&gt;
      &lt;div id="myModal" class="modal"&gt;
          &lt;span class="close"&gt;&amp;times;&lt;/span&gt;
          &lt;img class="modal-content" id="img01"&gt;
          &lt;div id="caption"&gt;&lt;/div&gt;
      &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>