परसिस्टेंट टॉप लेयर यूज़र इंटरफ़ेस (यूआई)

appendChild() या insertBefore() जैसे पारंपरिक तरीकों का इस्तेमाल करके, DOM में किसी खुले हुए <dialog>, popover या फ़ुलस्क्रीन एलिमेंट को मूव करने पर, ब्राउज़र उस एलिमेंट को DOM से हटा देता है और फिर से शामिल करता है. इस बदलाव से, स्टेट रीसेट हो जाती है. इस वजह से, खुले हुए मॉडल, पॉपओवर, और फ़ुलस्क्रीन एलिमेंट अचानक बंद हो जाते हैं.

उपयोगकर्ता अनुभव में रुकावट डाले बिना या टॉप-लेयर एलिमेंट को बंद किए बिना, उन्हें फिर से पैरंट करने के लिए, ऐटॉमिक moveBefore() एपीआई का इस्तेमाल करें.

टॉप-लेयर के खुले हुए एलिमेंट को रीपैरेंट करना

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() एक प्रोग्रेसिव एन्हांसमेंट है. इसलिए, इसे कॉल करने से पहले आपको सुविधा की पहचान करने की सुविधा का इस्तेमाल करना होगा. पुराने ब्राउज़र के लिए, आपको पुराने तरीके से रीपैरेंटिंग करनी होगी.

ज़रूरी जानकारी: जिन ब्राउज़र पर यह सुविधा काम नहीं करती है उनमें <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();
  }
}