<div>
Works fine in Firefox from here.
</div>

<div>
Take a look at this code 

<pre><code class="code-1 nolinks" id="code-20-42361441-1">var span = document.getElementsByClassName(&quot;close&quot;)[0];

// When the user clicks on &lt;span&gt; (x), close the modal
span.onclick = function() {
 modal.style.display = &quot;none&quot;;
} 
</code></pre>
Specifically at the first line. 
 
What you are saying is - find all the elements with the class &quot;close&quot; and then bind a click event handler to the FIRST one. 
 
Two things you can do 
jQuery 

<pre><code class="code-1 nolinks" id="code-20-42361441-2">$('.close').click(function(e) {
 e.preventDefault();
 modal.style.display = &quot;none&quot;;
});
</code></pre>
Or JavaScript 
 

<pre><code class="code-1 nolinks" id="code-20-42361441-3">var els = document.getElementsByClassName(&quot;close&quot;);
for(var i = 0; i &lt; els.length; i++) {
 els[i].addEventListener('click', function() {
 modal.style.display = &quot;none&quot;;
 });
}
</code></pre>
 
You have the same problem with binding your event handler to the images - currently only the first one is binding. This is because of a number of things 
1. All your images have the same id - this is a no no - your id's must be unique. As you have it only the first image will be bound to the click 
2. Your binding process has the same flaw as the closing process. 
 
Here is what you do 
1. Remove the id's from the image's and instead give them a class - lightbox 

<pre><code class="code-1 nolinks" id="code-20-42361441-4">&lt;img class=&quot;lightbox&quot; src=&quot;images/Sculptures/REPICA OF AMERICAN PHAROAH, III.jpg&quot; alt=&quot;Trolltunga, Norway&quot; height=&quot;200&quot; width=&quot;183&quot;&gt;
</code></pre>
2. Use jQuery to bind a click handler to the img 

<pre><code class="code-1 nolinks" id="code-20-42361441-5">$('.lightbox').click(function() {
 modal.style.display = &quot;block&quot;;
 modalImg.src = this.src;
 captionText.innerHTML = this.alt;
});
</code></pre>
 
3. Bind the close using the jQuery solution above 

<pre><code class="code-1 nolinks" id="code-20-42361441-6">$('.close').click(function(e) {
 e.preventDefault();
 modal.style.display = &quot;none&quot;;
});
</code></pre>
 
That should get you working. 
 
Ultimately though - you only need one close button - you have many - the close button should be associated with your modal and all that happens when you click the small image is the modal's &lt;img&gt; src gets set to the target associated with the clicked image and the modal is displayed (much as you are doing now). The close is linked to the modal which when clicked closes it.
</div>

<div>
Hello, 
 
Thank you for the detailed response. Does the two JQuery codes you have take the place of something I already have? And do I edit the HTML code? I can get it to work for 1 image (the first one) using: 
 
&quot;$('.close').click(function(e) { 
&nbsp; &nbsp;e.preventDefault(); 
&nbsp; &nbsp;modal.style.display = &quot;none&quot;; 
});&quot; 
 
but I think having the same close button name is causing it not to work for the others? The other images do not even pop up. I assume its due to the image name but when I change it, nothing works.
</div>

<div>
The code you have above should work for all close buttons. 
It will bind to all elements with the close class and trigger the event handler if any one of them is clicked. 
 

<blockquote>
The other images do not even pop up
</blockquote>
 
I explained this in my post - the reason for this is that you are binding to the ID and your images all have the same ID - which is invalid. 
 
Remove the ID and replace with a class (as per my suggestion above) then bind your click handler to the class on the image. 
 
See my steps 1 - 3 above.
</div>

<div>
Thank you. I was able to get it to work with image 1 and 2. The problem I am still having is, I cant click the images when I use class=&quot;lightbox&quot; for all 4 images. As soon as I add it to more than 1, it doesn't work anymore.
</div>

<div>
In the mean time I was messing with it and create multiple light box scrips with a different name and that seemed to work. thank you for your help!
</div>

<div>
<div class="content wysiwyg-content">
Hello, 
 
I recently added code from this site (<a href="https://www.w3schools.com/howto/howto_css_modal_images.asp" rel="ugc">https://www.w3schools.com/howto/howto_css_modal_images.asp</a>). Everything works great except the close function. See page: <a href="http://doeringdesign.com/ED/#!/page_AP" rel="ugc">http://doeringdesign.com/ED/#!/page_AP</a>. 
 
Does anyone have any solutions on how to close this popup? Maybe just have it link to the original page? 
 
Thank you!
</div>
</div>

Hello,

I recently added code from this site (https://www.w3schools.com/howto/howto_css_modal_images.asp). Everything works great except the close function. See page: http://doeringdesign.com/ED/#!/page_AP.

Does anyone have any solutions on how to close this popup? Maybe just have it link to the original page?

Thank you!

Javascript Close Function

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

HTML

JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and  in almost every mainstream web browser.