Per this post: Adding multiple modals to a page,
I have one question:
When I use this:
<a href="#" data-open-modal data-modal="8"><img src="images/image1.jpg" /></a>The modal doesn’t work. If I replace the imagine with text like this:
<a href="#" data-open-modal data-modal="8">TEST GOES HEAR</a>It works fine- so why would the images not work. It brings up the modal without the content and it’s about 1 inch in height.
I appreciate your help.
Thank you.
Hi,
Silly question, but is the path to the image correct?
Also, do you see any errors in the console?
Hi @javascript7, I haven’t tried it but that’s probably because the modal ID is getting acquired from the event target:
var id = event.target.getAttribute('data-modal')
However if you’re clicking an image inside the link, the event target will refer to that image, not the link; and the image doesn’t have the data-modal attribute. You can solve this by getting the ID from the event.currentTarget instead (which is the element the event listener got added to rather than the element from which the event got dispatched):
var id = event.currentTarget.dataset.modal
Not silly! But yes, the path to the image is correct because I can see it on the page. Like I mentioned, if it’s text it’s fine and if I replace with an image, it looks like this:
I replaced the above with this:
var id = event.currentTarget.dataset.modal…and get the same results. Did I interrupt that correctly?
Thank you!
Yes that should work then. What value do you get for the ID when you log it to the console?
If you added the code from @m3g4p0p correctly and assuming you are using the code from the other thread it seems to work for me.
It’s so much easier if you can throw up a quick demo like this when you have problems 
Good idea Paul, thank you. This is one of the modal that you worked on that has been very useful for me. You did an incredible job on it. There were 2 version and maybe I am getting them mixed up. This one has the iframe-wrap.
Here’s the JS:
window.onload = function () {
var openModalLinks = Array.prototype.slice.call(document.querySelectorAll('[data-open-modal]'));
var closeModal = document.querySelector('.modal-close');
var modalOverlay = document.querySelector('.modal-overlay');
var modalInner = document.querySelector('.modal-inner');
var modalContent = document.querySelector('.modal-inner');
var modalContent = Array.prototype.slice.call(document.querySelectorAll('div[class^="modal-content-"]'));
var handleShowModal = function (id) {
document.querySelector('body').classList.add('modal-visible');
modalOverlay.classList.add('visible');
modalOverlay.querySelector('.modal-content-' + id).classList.remove('hide');
modalOverlay.querySelector('.modal-content-' + id).classList.add('isPlaying');
}
var handleHideModal = function (event) {
modalOverlay.classList.remove('active');
}
var handleOpenModal = function (event) {
var id = event.target.getAttribute('data-modal');
event.preventDefault();
modalOverlay.classList.add('active');
window.setTimeout(handleShowModal(id));
}
var handleCloseModal = function (event) {
if (event.target !== event.currentTarget) {
return;
}
var el = document.querySelector('.isPlaying iframe');
event.preventDefault();
document.querySelector('body').classList.remove('modal-visible');
if (el) {
el.setAttribute("src", el.getAttribute("src"));
}
modalOverlay.classList.remove('visible');
modalContent.forEach(function (modal) { modal.classList.add('hide'); modal.classList.remove('isPlaying') });
modalOverlay.addEventListener(
'transitionend',
handleHideModal, {
once: true,
passive: true
}
);
}
openModalLinks.forEach(function (link) { link.addEventListener('click', handleOpenModal) });
closeModal.addEventListener('click', handleCloseModal);
modalInner.addEventListener('click', handleCloseModal);
}
This is the modal with the wrap:
<div class="modal-content-3 hide">
<div class="iframe-wrap">
----- youtube iframe code goes here -----
</div>
</div>That works with the changes already suggested by @m3g4p0p .
i.e.
var handleOpenModal = function (event) {
// var id = event.target.getAttribute('data-modal');
var id = event.currentTarget.dataset.modal;
What is it that is still not working for you?
Well now I know - I tried it again and again it didn’t work. So then I thought that perhaps the old version was caching on my computer. Found out that all browsers including the cell phone, that once the cache was cleared on each browser, it worked!
So thank you to all and sorry that I hadn’t of thought about the cache in the beginning. I would like to be educated and know why it had to be changed. I thought that in using a href that whether it’s text or an image it should always work. Why is this different?
Thank you!
@m3g4p0p explained the reason in his first post above.
The event listener was on the anchor but the clicked target was the image. The code then interrogated the image rather than the anchor and so failed.
Read the post by @m3g4p0p for a better explanation:)
If you open your devtools window while testing you can set it not to cache the page and avoid that issue 
Did not know that, thank you!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.