I followed a tutorial from: Popup with blurred background Using CSS3 And Vanilla Javascript | Modal* (This is the title of the video).
The thing is that I made it that when you click the image itself then the image will popup like the text from the video.
The problem is that for me since I’m trying to popup an image the rest of the images popup in the bottom as well. I have several images horizontally and when I click on one I want only that one to popup.
You have’nt shown your toggle function yet. So I cannot be 100% correct with my answer but no harm in trying…
You may have toggled all the images except the specific one.
You can do…
Let images = document.querySelectorAll('img');
For(let image in images){
If(image == ""your image to popup"")
Image.style.visibility='visible';
else
image.style.visibility='hidden';
}
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
function toggle(){
var blur = document.getElementById(‘blur’);
blur.classList.toggle(‘active’);
var popup = document.getElementById(‘popup’);
popup.classList.toggle(‘active’);
}
function toggle(){
var blur = document.getElementById('blur');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
}
It would be much easier to help if you’d provide the full code (via https://codepen.io for example), because it’s hard to tell what exactly is your error. You have two images in your popup, do you want only one to show up?
Yes! I created a list of images. When you click on one of them only one should popup, but both images do. I want to fix that and don’t know how.
The codes in the link above don’t work that well compared to mine. But, as you can see there are two images horizontally. When I click on one, the background turns blurry and the image I clicked should popup. Instead, all images popup.
at least something pops up, but it’s difficult to tell what’s popping up because all the image links are broken.
If you want only one of the two images in your <div id="popup"> to show, you can’t put them in the same popup-container and then toggle the active class on your whole container with both images inside. Of course they’ll both show then.
I’d rather have two popup-containers and then toggle them individually, depending on what was clicked before.
Yes, that’s where the div goes. I forgot to copy that one.
As for the toggle do you mean having two different functions or just a toggle div for each images?
I tried putting the images in different links, for example:
You only need one function and one popup, but you need something that tells the function which image it should show and which it should hide. You’ll first have to give your links an id as an easily accessible identifier, like this:
Your toggle function will now read the id of the link, loop over all images in the popup and set display:none on all of them, except the one with the class name you want to show:
function toggle(){
var blur = document.getElementById('blur');
blur.classList.toggle('active');
var popup = document.getElementById('popup');
popup.classList.toggle('active');
let imgClass = event.target.closest('a').id; // reads the id from the <a> tag
Array.from(popup.querySelectorAll('img')).forEach(image => { // loops over all images with forEach
if (image.classList.contains(imgClass)){ // if it's the image belonging to the <a> tag that was clicked,
image.style.display = 'block' // set display to 'block'
} else {
image.style.display = 'none' // set display to 'none' on all other images
}
})
}
As you only have two images right now, the function doesn’t really need that loop, but this way, you can add as many images and links as you like and it’ll always work.
Holy cow! That actually works. Could you please explain me a bit about this new function (codes) you wrote to make it work? I only know the basics of JavaScript and nothing this difficult (in my opinion).
One more thing. As you can see the other images turn blurry when I click on one of them. I have a footer. How can I also make it blurry? I tried adding the id=“blur” but it only works for one div and not for the rest (that has the same id tag).
To be more direct, I wanted to disable scrolling when you popup and image, but be able to close it back by just clicking at it. I can’t find anything easy. Everything about it seems a bit complicated.
I added comments to make it clear what each line does, I could only repeat those now. You might want to surf through the basics of JavaScript in the curriculum, it’ll give you all the skills you need for stuff like this.
I don’t really understand what you mean with the second paragraph, but as for the blur thing - instead of giving your elements an id blur, you could give them a class blur, and then modify your toggle function like this:
function toggle(){
var blurElements = Array.from(document.getElementsByClassName('blur')); // gets all elements with class "blur"
blurElements.forEach(element => element.classList.toggle('active')); // loops through all elements and toggles class "active" on them
})
}
Have you given all the elements you’d like to blur a class="blur"? You might run into trouble if an element already has another class. If you have an updated codepen, it would be easier to see where the problem is.
Yes I did. I changed them to class, but that didn’t do anything at all even when I click on the image it didn’t popup anything and nothing turned blurry.
This won’t work: <div class="footer" class="blur">
An element can only have one class attribute, so you’ll have to write them like this instead: <div class="footer blur">, also the other one: <div class="content2 blur">
You gave your popup the blur class, too - that actually breaks things, so just remove the class from there
You forgot to add the img-classes in your popup, that’s why they’re currently both set to display:none <img class="img-1" src="https://www.w3schools.com/images/lamp.jpg"> <img class="img-2" src="https://www.w3schools.com/images/lamp.jpg">
And here’s the script, I’ve simplified it a bit in case you’d like to try to understand what it does:
function toggle(){
let blurElements = document.querySelectorAll('.blur');
blurElements.forEach(element => element.classList.toggle('active'));
let popup = document.querySelector('#popup');
popup.classList.toggle('active');
let imgClass = event.target.closest('a').id;
popup.querySelectorAll('img').forEach(image => {
if (image.classList.contains(imgClass)){
image.style.display = 'block'
} else {
image.style.display = 'none'
}
})
}
