Permanente UI voor bovenste laag

Als je een open <dialog>, popover of element op volledig scherm in de DOM verplaatst met traditionele methoden zoals appendChild() of insertBefore(), verwijdert de browser het element impliciet uit de DOM en voegt het opnieuw in. Door deze verwijdering wordt de status gereset, waardoor geopende modale elementen, pop-overs en elementen op volledig scherm abrupt worden gesloten.

Als je elementen op de bovenste laag een nieuwe bovenliggende container wilt geven zonder de gebruikerservaring te onderbreken of de elementen te sluiten, gebruik je in plaats daarvan de atomische moveBefore() API.

Open elementen van de bovenste laag opnieuw bovenliggend maken

moveBefore() heeft 2 argumenten: de node die moet worden verplaatst en een referentienode die ervoor moet worden ingevoegd (of null om aan het einde van de nieuwe bovenliggende node toe te voegen).

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);

Reservestrategieën

Omdat moveBefore() een progressive enhancement is, MOET je functiedetectie gebruiken voordat je deze aanroept. Voor oudere browsers moet u terugvallen op traditionele reparenting.

VERPLICHT: Voor <dialog>-elementen in niet-ondersteunde browsers wordt het dialoogvenster gesloten bij de traditionele verplaatsing. Als je wilt dat de taak open blijft, moet je deze na de verplaatsing handmatig opnieuw openen.

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();
  }
}