Display Fancybox on Top of HTML Dialog Element

[cjmellor]

Hello,

I've built a HTML Dialog element (<dialog>) with some images in it and when you click the image that is when the Fancybox kicks in, but when it opens, the opens behind the dialog.

I was wondering if there was a way built in, or some CSS I could use to make sure it appears in front of the <dialog> element.

Thanks.

[fancyapps]

Hi,

I don't think this is possible because the dialog element, like the alert, is meant to appear above any page content.

Maybe try to do the opposite - when Fancybox opens, hide the dialog window and when closing - reveal it.

[cjmellor]

Shame :( figured that would be the case.

Thanks!

[fancyapps]

FYI, Fancybox supports multiple instances. With Fancybox, you can display a modal containing images, and clicking on them could open a new instance of Fancybox.

[jannispaul]

I also needed the lightbox on top of an existing dialog element. This is somewhat hacky and might not work in every case but in my specific case it seems to work fine.

Fancybox.bind("[data-fancybox]", {
    on: {
      reveal: (fancybox) => {
        // Get fancybox container and create dialog from it
        let fancyboxContainer = document.querySelector(".fancybox__container");
        let dialog = document.createElement("dialog");
        dialog.appendChild(fancyboxContainer);
        document.body.appendChild(dialog);
        dialog.showModal();
      },
      close: (fancybox) => {
        // Close and remove dialog on close
        let dialog = fancybox.container.parentElement;
        if (dialog) {
          dialog.close();
          dialog.remove();
        }
      },
    },
  });

Note that I also had to do some additional event handling for the escape key so only the top most dialog get closed.