JAVASCRIPT
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".trigger");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
You can see the issue at — hidden link when clicking on the “View streets covered” buttons, there should be a different Modal pop-up for each, but only the first one loads.
Is there a way to be able to display the correct Modal depending on which button is clicked?
I don't really understand what's going on with your code. Are you using a library of some kind to implement the modals are this is an entirely bespoke implementation?
I'm not sure what to make of your JS.
For one thing, document.querySelector returns only the first matching element, so the var modal will only ever be the first element with the modal class, for example. Hence your toggleModal function will only ever operate on the first element with modal class. Given what you describe—it is always the first modal the opens—that may be why.
It's not clear to me how the modal opens in the first place, but all of your event listeners ultimately just target the first modal.
I basically found the code and markup during a Google search – hidden link
I thought that it was a fairly straightforward way of implementing modal pop-ups without too much work, but it wasn’t until I noticed that it was only ever loading the first modal that I realised that it might not be the best solution.
Does Toolset have anything built-in which may help?
