On clicking close button on a lightbox redirect to another url

Here is the thing. I’m working on elementor EA lightbox. So when I click on an image a lightbox with video pops up. So I want it to redirect when the person clicks on the "X" button. We can achieve it with a script by adding an ID to the button and on click redirect to a link, I know. But the problem is with elementor, we can’t actually add ID or Class to the close button. This is how the close button looks like.

<button title="Close" type="button" class="mfp-close">×</button> 

This is the code I tried. But it is not working with "getElementsByClassName" for some reason. And as I said I even can’t add an ID to the button.

<script type="text/javascript">     document.getElementsByClassName("mfp-close").onclick = function () {         location.href = "www.google.com";     }; </script> 

Can anyone see how this could work? Any help please?

Add Comment
3 Answer(s)

document.getElementsByClassName("mfp-close") return an array

you can try

document.getElementsByClassName("mfp-close")[0]

<script type="text/javascript">     document.getElementsByClassName("mfp-close")[0].onclick = function () {         location.href = "www.google.com";     }; </script> 
Answered on July 16, 2020.
Add Comment

Change class to ID and then:

<script type="text/javascript">     $("#mfp-close).click(function () {     window.location.href = "www.google.com";     }); </script> 
Answered on July 16, 2020.
Add Comment

TRY using querySelector instead of getElementByClassName

document.querySelector(".mfp-close").onclick = function () {     location.href = "www.google.com"; }; 
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.