Run function on modal close

[chrisjayden]

Hey!

I noticed Pro is using it’s own Lightbox functions. I’m not sure what’s the best way to run a function when someone closes the modal (this is also closing the modal when the user clicks anywhere on the screen).

For example, I noticed this piece of code:

What can I check for when the modal closes?

                o.on("xToggleState", "[data-x-toggle]", function(e, n) {
                    var i = t(this);
                    i.find(".x-toggle").toggleClass("x-active", n),
                    window.csGlobal.bowser.msedge || window.csGlobal.bowser.msie || window.csGlobal.bowser.ios || i.find("[data-x-toggle-anim]").each(function() {
                        var e = t(this);
                        e.hasClass("x-running") || e.one("webkitAnimationIteration mozAnimationIteration MSAnimationIteration oanimationiteration animationiteration", function() {
                            e.removeClass("x-running"),
                            i.hasClass("x-active") || e.removeAttr("style")
                        }),
                        e.addClass("x-running"),
                        i.hasClass("x-active") && e.css({
                            "animation-name": e.data("x-toggle-anim")
                        })
                    })
                }),
```

[rad]

Hi there,

Thanks for writing in.

It’s best to attach the function when the user clicked the close button. Or any element that will trigger the close event. Would you mind providing a sample page where your lightbox is? Or is it a modal element?

Thanks!

[chrisjayden]

Hmm I just removed the sample.

Yes, it’s the modal not the lighbtox. Apologies for the confusion.

It’s not hard to attach the function to the close button, since I can just use getElementsByClass but I have troubles finding the function that runs upon modal close.

Hope that makes sense @Rad

[ruenel]

Hey There,

To attached a function to the close button of the modal element, you may use this code:

(function($){
  $('.x-modal-close, .x-modal-content-outer').on('click touchend', function(){
    // you may your code here.
  });
})(jQuery);

Hope this helps.