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

Question

我在基于PHP的Web应用程序中有一个复杂的输入表单。 为了对其进行结构化，我引入了“多面灯箱”，以使表单的某些部分（名为“显示”设置为“无”的内联DIV）出现在“灯箱”样式对话框中。 它运作良好，直到现在我才意识到，当它显示DIV时，会将其复制到其居中的DIV中，并将其从表格中取出-并且其中包含的输入表格的所有更改都将丢失。

使内置DIV进入居中灯箱对话框的mf_lightbox代码中有问题的代码为：

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”来处理周围的表格。