How to trigger other functions when clicking Lightbox close button?

Design help Custom code
1

Hello :wave:

Does anyone know how to run some custom code after clicking the Lightbox close button?

My code is $(document).ready(function() { $(".w-lightbox-control.w-lightbox-close").click(function(){ console.log("the close button clicked!"); }); });

It won’t work actually…
But if I copy the code and just paste that into the Console in the DevTools of Chrome.
It will work!

I’m not really familiar with javascript but I guess I need to run this code in the very end, right?
Just don’t know how to do, hope there’s some one can help.

Many thanks!

Here is my site Read-Only: [LINK][1]

2

Hello,

The “.w-lightbox-close” gets generated by webflow after we try to add the onclick event listener.

let hasClickListenerBeenAdded = false;

function addCloseClickListenerWithDelay() {
  if (!hasClickListenerBeenAdded) {
    hasClickListenerBeenBeenAdded = true;
    setTimeout(function() {
      $('.w-lightbox-close').on('click', function() {
        your-function();
      });
    }, 500); // Delay of 500 milliseconds before attaching the event listener
  }
}

$('.your-lightbox-link-class').on('click', function() {
  addCloseClickListenerWithDelay();
});

Hope this helps!

Edit: Just replace the “your-function()”

1 Like
3

Thank you so much!! @Davedo
And sorry for the late replay :smiling_face_with_tear: