multiple modals with project-specific texts

[ErEs]

hello,

i have question on how to solve a specific problem with code.

i custom coded a modal for my project-pages using custom html, some javascript and custom css (see code below).

on my website i have a button called information. clicking on it activates a modal showing some text (project description). i used custom html, instead of pasting my button in the gridder for every single page so it will be displayed on top of my fixed menu bar(!).

Because i used html at top, it will by default be displayed on every page.
This also means my modal text (project description) will always be the one
i wrote in my html and will not change.

What i am trying to achieve:
While the information button itself should always stay the same, the text inside the modal should change depending on the project currently shown.

What i tried:
For now i am dealing with empty html tags and adding content via css using the pseudo class ::after.

i also tried wordpress plugins for creating modals. after creating a modal one can use shortcode to implement it on a page. great! unfortunately this will not work, because it will be covered by my fixed menu bar on top.

i am not asking for the code itself here. i am more interested in finding a user-friendly solution for implementing multiple modals. since i am not a web developer myself i am wondering how you would do this in a professional way.

best regards!

here is the code i used:

this html goes at top:

<button class="modal-button" data-modal-target="#modal"> information </button>
<div class="modal" id="modal">
<div class="modal-header">
 <div class="modal-title"></div>
 <button data-close-button class="close-button">×</button>
 </div>
 <div class="modal-body">

this javascript goes at bottom:

<script>

const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')

openModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
  })
})

overlay.addEventListener('click', () => {
  const modals = document.querySelectorAll('.modal.active')
  modals.forEach(modal => {
    closeModal(modal)
  })
})

closeModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = button.closest('.modal')
    closeModal(modal)
  })
})

function openModal(modal) {
  if (modal == null) return
  modal.classList.add('active')
  overlay.classList.add('active')
}

function closeModal(modal) {
  if (modal == null) return
  modal.classList.remove('active')
  overlay.classList.remove('active')
}

</script>

custom css:

.slug-objects .modal-title::after {
	content:"objects";
}
.slug-objects .modal-body::after {
	content:"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet..";
}

[arminunruh]

hey there!

1 on click, find body attribute [data-id]
2 maybe a switch case statement that places text into the modal depending on the id

or maybe you could get the html for the modal content from a row that you hide via css.
it could be a row that you give a certain class with "set html class / id" by right clicking that row.

of course this is not ideal,
you can't really put acf into lay theme for example

If you're good at programming and only need lay theme's gridder, I'd advise you to get laygridder.com instead. It doesn't have a carousel though.
Then use the laygridder plugin and code your own wordpress theme. Use ACF or another custom fields plugin for your modals.

[ErEs]

@arminunruh

thank you for your quick response! these are all great tips which i have not thought about yet. i will go for the "get by id" function.

great support as always.

merci :)