Açık bir <dialog>, popover veya tam ekran öğesini appendChild() ya da insertBefore() gibi geleneksel yöntemleri kullanarak DOM'da taşırken tarayıcı, öğeyi DOM'dan dolaylı olarak kaldırır ve yeniden ekler. Bu kaldırma işlemi durumu sıfırlayarak açık modalların, popover'ların ve tam ekran öğelerin aniden kapanmasına neden olur.
Üst katman öğelerini kullanıcı deneyimini kesintiye uğratmadan veya kapatmadan yeniden üst öğe olarak atamak için atomik moveBefore() API'yi kullanın.
Açık üst katman öğeleri yeniden üst öğe olarak atanıyor
moveBefore() iki bağımsız değişken alır: taşınacak düğüm ve önüne eklenecek referans düğüm (veya yeni üst öğenin sonuna eklenecek 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);
Yedek stratejiler
moveBefore(), progresif geliştirme olduğundan, çağrılmadan önce özellik algılama kullanılmalıdır. Eski tarayıcılar için geleneksel yeniden üst öğe atama yöntemini kullanmanız gerekir.
ZORUNLU: Desteklenmeyen tarayıcılardaki <dialog> öğeleri için geleneksel taşıma işlemi iletişim kutusunu kapatır. Açık kalması gerekiyorsa taşıma işleminden sonra manuel olarak yeniden açmanız gerekir.
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();
}
}