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

问：

我在基于 PHP 的 Web 应用程序中有一个复杂的输入表单。为了稍微组织一下，我引入了“多面灯箱”，让表单的某些部分（名为内联 DIV，将“display”设置为“none”）出现在“灯箱”样式对话框中。它工作得很好，直到现在我意识到，当它显示一个 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很快，很棒，我非常想坚持下去。

我说得够清楚吗？你明白我的意思吗？您知道以不同的方式做到这一点的灯箱替代品吗？

提前感谢您的回答！

JavaScript HTML 灯箱

我在使用 FancyBox 时也遇到过类似的问题。问题似乎是，这些模态框中的许多内容都克隆了它放入弹出窗口的内容，而不是移动它。我过去使用过的一个修复方法是，如果有回调函数，请手动在弹出窗口中来回移动内容。所以，最后，模态框函数只是加载一个空白的div，然后我手动将内容移入和移出它。

0赞 Pekka 10/30/2009

这似乎正是问题所在。你有关于如何移动元素的例子吗？我还没有深入研究 DOM 操作，如果你能为我指出正确的方向，我将不胜感激。

答：

2赞 Pekka 10/31/2009 #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”来处理周围的表单。

上一个：在Firefox中显示突出显示的HTML源代码？

下一个：一次签入多个 Subversion 客户端？

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

How to attach a "pointer" to DOM element to a lightbox instead of copying it?

评论