Lightbox for "In-Context" Editing

Question

Some sites effectively combine the concept of, for the lack of better term, "in-context editing" and lightbox to allow users to easily do page content update. For example, check out Schoola and try changing the title text. You'll be presented with an "edit panel," which sits nicely on top of and has almost the same dimension with the title area.

This model works well to a certain extent but might have a difficulty to scale gracefully e.g. when the "edit panel" needs to grow much larger than the area that you're editing. Imagine if the title edit panel is 3 times longer than what it is now. To say the least, visually it might look as good as it is right now.

I am looking for an alternative that somehow detaches the edit panel from the target area it's editing. In other words, an interaction model that allows the edit panel to be positioned not necessarily always on top of the edited area (e.g. maybe to the side of it, maybe as a page-centered lightbox). However, I am having difficulty in providing the linkage / clue for the users to know exactly which area they are editing.

Answer 1

What about a edit panel that maybe floats, or takes up a slice of the viewport, but keep the live preview pane open and dim everything in the site except the box for the one item that is being edited.

So, in your example:

1. The author clicks on the header.
2. A new editing panel opens up somewhere else, perhaps docked to the bottom third of the viewport.
3. The website gets dimmed with a dark translucent layer, but the header's box remains at full brightness.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 2

Have you considered the gTalk style simple but elegant and very functional Pop-out?

With this, the 'box'should be able to have a size and position identical to the field being edited, by default. The 'box' can conveniently Pop-out at the user's discretion for a more spacious editing.