Skip Navigation

[Resuelto] Using Javascript to display different modals

This support ticket is created hace 1 año, 7 meses. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Etiquetado: 

This topic contains 3 respuestas, has 2 mensajes.

Last updated by Craig hace 1 año, 7 meses.

Autor
Mensajes
#1953781

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?

#1954377

Nigel
Supporter

Languages: Inglés (English ) Español (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.

#1954427

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?

#1954631

Hi Nigel,

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

My issue is resolved now. Thank you!