It’s not really clear what you’re asking. In class="overlay overlay–info", there are two classes — overlay and overlay-info, and you can use them on ay elements you like.
If you are using js and want to open multiple overlays then you’d need to loop through each trigger element and have a method to identify which overlay to open.
I am busy following a training course and I have an info button which opens a page and I would like to be able to do the same thing with the link I made on each page on the first page there is the free quote link and the others page the link find out more.
You can see the link. You can see a div inside the link. You can see that it has a class attribute. What is stopping you from typing the words “overlay overlay--info” into that class attribute?
I believe the OP wants to add a class to each of those slide__number parents so that when clicked it will open an overlay specific to that slide number.
That obviously doesn’t work because the original script is only looking for one element to open so either a new script will be needed or the original refactored for multiple uses.
Unless I’m mistaken as I often am where scripting is concerned
I thought it was easier to set up like a kind of popup.
I just wanted to use the same thing as the info button and do the same for the links.
Many thanks for your help because I am a beginner and I am learning a lot here on the forum even if it is true that I tinker a lot and I try to learn as best I can with your advice.
oh okay. I get you now. Too much stuff going on on one page… stuff stuffed inside other things obscuring the code from elements… sigh.
Well, there’s a few approaches… personally, i’d think the simplest to implement at this point would be to flood an array with the texts and do a text-replace on the extant box JIT.
Spitballing this for the most part. May need some tweaking.
Inside the function set:
var linkTexts = ['“Créateurs de NFT” est un artiste qui produit de l’art numérique. Il encrypte ensuite ses créations dans une blockchain. Cette fois-ci, point de cryptomonnaie comme le Bitcoin, il s’agit d’art numérique. Un NFT est le lien entre une œuvre et son certificat unique. Vous avez une idée d’image numérique pour votre NFT ? Nos artistes s’occupent de la réaliser.',
'This is a different text',
...etc.
'This is another text'];
Find and tweak the toggleInfo function:
function toggleInfo(index) {
if (isNavigating) {
return false;
}
if (DOM.infoCtrl.classList.contains('btn--active')) {
// Close it.
closeInfo();
} else
{
// Open it.
DOM.infoText.innerHTML = '<p class="info">' + linkTexts[typeof(index) == 'number' ? index : 0 ] + '</p>'
showInfo();
}
}
inside initEvents:
for(let i = 0; i < linkTexts.length; i++) {
[...document.querySelectorAll(".infoLink"+i)].forEach(link => {
link.addEventListener('click', function() { toggleInfo(i); }
}
}
And then add a class to each link corresponding to their appropriate link text:
In case a simpler css version is acceptable you can use the :target pseudo class to open the modal but of course you can’t have any other fragment identifiers inside the modal as that would close it.
Here’s a demo with all the anchors pointing to a modal so that it opens.
If its just for info then it should be ok otherwise you will have to resort to the JS version that @m_hutley has kindly offered.
