javascript - 如何将指向 DOM 元素的“指针”附加到灯箱而不是复制它？

Question

我在基于 PHP 的 Web 应用程序中有一个复杂的输入表单。为了稍微结构化，我引入了“Multifaceted lightbox”，让表单的一部分——命名为内联 DIV，“display”设置为“none”——出现在“lightbox”样式对话框中。它工作得很好，直到现在我才意识到，当它显示一个 DIV 时，它会将其复制到其居中的 DIV 中，将其从表单中取出 - 并且对其中包含的输入表单的所有更改都将丢失。

mf_lightbox 代码中有问题的代码使内联 DIV 成为居中的灯箱对话框：

showBoxByID : function(id, boxWidth, boxHeight) {
this.lightboxType = 'id';
this.lightboxCurrentContentID = id;
this.setLightboxDimensions(boxWidth, boxHeight);
var element = $(id);
var contents = $('mf_boxContents');
contents.appendChild(element);  // <!-- This is where it happens
Element.show(id);
this.showBox();
return false;
},

有没有人知道不复制的方法，但以某种方式将 div “附加”到 boxContents 层，所以它保持在 dom-wise 的形式？就像编程语言中的指针一样？这个 mf_lightbox 很快，很棒，我非常想继续使用它。

我说得够清楚吗？你明白我的意思吗？您知道以不同方式执行此操作的灯箱替代品吗？

提前感谢您的回答！

Answer 1

解决方案比想象的要容易得多。我只需要存储要插入灯箱的元素的父元素：

// Save parent?
this.contentParent = element_to_be_inserted.parentNode; 

并在关闭时将元素移回父级：

// Move elements back to original location
if (this.contentParent != null)
 this.contentParent.appendChild($(this.lightboxCurrentContentID));
else
 body.appendChild($(this.lightboxCurrentContentID));

对于那里的任何灯箱，这应该以相同的方式工作。完成后，只需将元素 appendChild() 回其父级即可。

当然，一个缺点是，只要您的元素在灯箱中，您就无法使用“this.form”处理周围的表单。