[Résolu] Using Javascript to display different modals

[Auteur]

Publications

[Craig]

I have a page which will contain multiple Modal pop-ups which I have generated the code for within my View…

HTML
[wpv-conditional if="( $(wpcf-patch-streets) gt '' )"]
<button class="trigger" data-element="[wpv-post-id]">View streets covered</button>
<div class="modal" id="[wpv-post-id]">
<div class="modal-content">
<span class="close-button">×</span>
<h3>Streets covered by [wpv-post-title output='sanitize']</h3>
<span class="patch-streets">[types field='patch-streets'][/types]</span><br />
</div>
</div>
[/wpv-conditional]

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();
}
}

trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);

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?

[Nigel Supporter Languages: Anglais (English ) Espagnol (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Craig

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.

[Craig]

Hi Nigel, thank you for the reply.

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?

[Craig]

Hi Nigel,

I found hidden link which took seconds to install and then tweaked the View.

My issue is resolved now. Thank you!