영구 최상위 레이어 UI

웹 기능: moveBefore()

appendChild() 또는 insertBefore()와 같은 기존 메서드를 사용하여 DOM에서 열려 있는 <dialog>, popover 또는 전체 화면 요소를 이동하면 브라우저가 암시적으로 DOM에서 요소를 삭제하고 다시 삽입합니다. 이 삭제는 상태를 재설정하여 열려 있는 모달, 팝오버, 전체 화면 요소가 갑자기 닫히게 합니다.

사용자 환경을 방해하거나 최상위 레이어 요소를 닫지 않고 최상위 레이어 요소를 다시 상위 요소로 지정하려면 대신 원자적 moveBefore() API를 사용하세요.

열려 있는 최상위 레이어 요소의 상위 요소 변경

moveBefore()는 이동할 노드와 앞에 삽입할 참조 노드 (또는 새 상위 요소의 끝에 추가할 null)라는 두 인수를 사용합니다.

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

대체 전략

moveBefore()는 점진적 개선이므로 호출하기 전에 기능 감지를 사용해야 합니다(MUST). 이전 브라우저의 경우 기존 상위 요소 재지정으로 대체해야 합니다.

필수: 지원되지 않는 브라우저의 <dialog> 요소의 경우 기존 이동은 대화상자를 닫습니다. 계속 열어 두어야 하는 경우 이동 후 수동으로 다시 열어야 합니다.

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