Stały interfejs warstwy górnej

Podczas przenoszenia otwartego elementu <dialog>, popover lub elementu pełnoekranowego w DOM za pomocą tradycyjnych metod, takich jak appendChild() lub insertBefore(), przeglądarka niejawnie usuwa element z DOM i ponownie go wstawia. Usunięcie powoduje zresetowanie stanu, co powoduje nagłe zamknięcie otwartych okien modalnych, wyskakujących okienek i elementów pełnoekranowych.

Aby zmienić element nadrzędny elementów najwyższej warstwy bez zakłócania wrażeń użytkownika lub zamykania ich, użyj interfejsu API moveBefore().

Zmiana elementu nadrzędnego otwartych elementów najwyższej warstwy

moveBefore() przyjmuje 2 argumenty: węzeł do przeniesienia i węzeł referencyjny, przed którym ma zostać wstawiony (lub null, aby dołączyć go na końcu nowego węzła nadrzędnego).

const newParent = document.getElementById('new-container');
const dialogElement = document.getElementById('my-dialog');

// MANDATORY: Use moveBefore to ensure the <dialog> or popover stays open.
// Passing null appends it to the end of newParent.
newParent.moveBefore(dialogElement, null);

Strategie zastępcze

moveBefore() to progresywne ulepszanie, dlatego przed wywołaniem tej funkcji MUSISZ użyć wykrywania funkcji. W przypadku starszych przeglądarek musisz wrócić do tradycyjnego przenoszenia.

OBOWIĄZKOWE: w przypadku elementów <dialog> w nieobsługiwanych przeglądarkach tradycyjne przeniesienie spowoduje zamknięcie okna. Jeśli chcesz, aby pozostał otwarty, musisz go ponownie otworzyć ręcznie po przeniesieniu.

const targetParent = document.getElementById('target-container');
const popoverOrDialog = document.getElementById('my-top-layer-element');

// Check if moveBefore is supported
if ('moveBefore' in Element.prototype) {
  targetParent.moveBefore(popoverOrDialog, null);
} else {
  // Fallback: traditional move.
  // Note: This WILL close <dialog>, popover, and fullscreen elements.
  const wasOpen = popoverOrDialog.hasAttribute('open') || popoverOrDialog.matches(':popover-open');
  targetParent.insertBefore(popoverOrDialog, null);
  
  // Manually restore state if possible
  if (wasOpen && typeof popoverOrDialog.showModal === 'function') {
    popoverOrDialog.showModal();
  } else if (wasOpen && typeof popoverOrDialog.showPopover === 'function') {
    popoverOrDialog.showPopover();
  }
}