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?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
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
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.