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..";
}
