How to close fancebox?

[andryshok]

Describe the bug

I have issue - Fancybox is not defined.

Reproduction

I use RESPONSIVE filemanager from https://www.responsivefilemanager.com/ In the version 3 of fancybox after select file in RESPONSIVE filemanager (opened with fancybox) fancybox closed with this code - parent.jQuery.fancybox.close() Now, i use fancybox 5 and method Fancybox.close(); now working , issue - Fancybox is not defined. How fix it?

Additional context

No response

[fancyapps]

Hi,

You can close Fancybox from the iframed page using window.parent.Fancybox.close();, example:

<p>
      <button onclick="window.parent.Fancybox.close();">Close this iframe</button>
</p>

Explanation

Let's break down the previous code (from Fancybox v3) parent.jQuery.fancybox.close():

parent - reference to the parent of the current window https://developer.mozilla.org/en-US/docs/Web/API/Window/parent jQuery - reference to jQuery; NO longer NEEDED, because Fancybox v4+ does not have jQuery as a dependency. fancybox - reference to fancybox; following the new naming convention, it now begins with a capital letter, use Fancybox close() - static method of the Fancybox; see https://fancyapps.com/fancybox/api/methods/#methods

Note

Make sure the Fancybox actually exists in the global space of the parent window. To verify this, simply open developer tools and type Fancybox in the console. The result should be something like this:

If you get the message Uncaught ReferenceError: Fancybox is not defined, double check that you have included the Fancybox JavaScript file correctly.

Tip. If you've included Fancybox using the build tool, here's how to make it globally accessible:

import { Fancybox } from "@fancyapps/ui";

// Your code

(window as any).Fancybox = Fancybox;