Javascript Close Function

WO2015
WO2015 used Ask the Experts™
on
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!
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Works fine in Firefox from here.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Take a look at this code
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
} 

Open in new window

Specifically at the first line.

What you are saying is - find all the elements with the class "close" and then bind a click event handler to the FIRST one.

Two things you can do
jQuery
$('.close').click(function(e) {
   e.preventDefault();
   modal.style.display = "none";
});

Open in new window

Or JavaScript

var els = document.getElementsByClassName("close");
for(var i = 0; i < els.length; i++) {
   els[i].addEventListener('click', function() {
     modal.style.display = "none";
   });
}

Open in new window


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
<img class="lightbox" src="images/Sculptures/REPICA OF AMERICAN PHAROAH, III.jpg" alt="Trolltunga, Norway" height="200" width="183">

Open in new window

2. Use jQuery to bind a click handler to the img
$('.lightbox').click(function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
});

Open in new window


3. Bind the close using the jQuery solution above
$('.close').click(function(e) {
   e.preventDefault();
   modal.style.display = "none";
});

Open in new window


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 <img> 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.

Author

Commented:
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:

"$('.close').click(function(e) {
   e.preventDefault();
   modal.style.display = "none";
});"

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.
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.

The other images do not even pop up

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.

Author

Commented:
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="lightbox" for all 4 images. As soon as I add it to more than 1, it doesn't work anymore.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Ok I see your problem.

You have duplicated the modal dialog with the same id again.

You need to go back to the drawing board.

Create only one modal - place it at the bottom of your page - give it an id of modal -as you have it.
Inside it place 1 close button and an empty <img> tag.

Then put your thumbs inside the following (not you add your full size image inside the <a> as well)
<a class="lightbox"><img src="thumbnail/path/here.jpg" /><img src="main/image/path/here.jpg" /></a>

Open in new window


Next, hide the second image with CSS
.lightbox img:last-child {
  display: none;
}

Open in new window


Now, add an event handler to the .lightbox click and open the modal setting the <img> src inside the modal equal to the src of the hidden image
// Some global variables to remember our
// static modal resources
var modal = $('#modal');
var lightboximg = $('#modal img');
$('.lightbox').click(function(e) {
  e.preventDefault();
  lighboximage[0].src = $('img:last-child', this).attr('src');
  modal.show();
});

Open in new window

Finally, the close button
$('.close').click(function(e) {
  e.preventDefault();
  modal.hide();
});

Open in new window


That should get you most (if not all) of the way there. Give that a go and post back.

Author

Commented:
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!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial