Javascript Close Function

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!
WO2015Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
Works fine in Firefox from here.
0
Julian HansenCommented:
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.
0
WO2015Author 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.
0
Determine the Perfect Price for Your IT Services

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

Julian HansenCommented:
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.
0
WO2015Author 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.
0
Julian HansenCommented:
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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WO2015Author 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!
0
Julian HansenCommented:
You are welcome
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.