Question

I have a complex input form within a PHP based web application. To structure it a bit, I introduced “Multifaceted lightbox” to let parts of the form – named inline DIVs with “display” set to “none” – appear within a “lightbox” style dialog box. It works great, until just now I realized that when it displays a DIV, it copies it into its centered DIV, taking it out of the form – and all changes to input forms contained in there are lost.

The code in question in the mf_lightbox code that makes a inline DIV into a centered lightbox dialog is:

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;
},

does anybody know a way to not copy, but somehow “attach” the div to the boxContents layer, so it stays in the form dom-wise? Like a pointer in a programming language? This mf_lightbox is quick, great and I would very much like to stay with it.

Am I being clear enough? Do you get what I mean? Do you know lightbox alternatives that do this differently?

Thanks in advance for your answers!

Answer 1

The solution was much easier than thought. I just needed to store the parent of the element to be inserted into the lightbox:

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

and on closing, move the element back to the parent:

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

This should work in the same fashion for any lightbox out there. Just appendChild() the element back to its parent when you’re done.

One downside of course is that you can’t address the surrounding form using “this.form” as long as your elements are in the lightbox.