I am using https://www.npmjs.com/package/fscreen package to show an element in fullscreen. When the particular element is in fullscreen mode I have an requirement to show a modal window, modal will show as expected when the fullscreen mode is exited but in fullscreen it will not show and the reason is modal created dynamically and added as a last child of the root element, even the z-index is higher it will not show.

I tried MutationObserver to see if any nodes added then to append that child inside the fullscreen HTML element to make it visible but it didn’t worked. I tried it because from the dev tools I used the arrange the modal div inside the fullscreen element. Below is my piece of code on mutation.

const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        mutation.addedNodes.forEach((node) => {
          if (node instanceof HTMLDivElement && node.id === 'modal-parent' && isFullScreen) {
            fscreen.fullscreenElement.appendChild(node);
          }
        });
      });
    });

Appreciate if have any other suggestions as well.