How to disable entire page except for one "island"?

Question

I've been running into a situation where users will:

1. Go into edit mode on a grid
2. Edit their data
3. NOT click the save button on the row they are editing
4. But instead click the "Next Page" button thinking it will save their data

I had toyed with the idea of adding functionality to the "Next Page" button click that would check the grid for rows in edit mode and save them, but I think this will save data that some users don't want saved.

What I would like to do is basically overlay the entire page except for the row that is in edit mode with a semi-transparent div that doesn't allow them to click on any thing else until they either save the changes or cancel out of edit mode.

Has anyone done something similar to this using jQuery?

Answer 1

I'd say the "proper" solution is to disable to "Next" button, until the row is saved (or the edit is canceled)

But, if you do want what you describe, that's very much the action of the jQuery UI Dialog plugin.

Answer 2

It seems that you don't want a "wizard" or "dialog," you want your row to be modal in its place. You could create a div over the whole page that captures mouse events, then temporarily add a class (jQuery would be perfect to this) to all of the div's that make up your single target row, that raises the z-index of those div's above the whole-page covering div.

Answer 3

The plugin blockUI will do exactly this. Highly recommended.

Simply block the whole page with $.blockUI then call $.unblockUI on the row that you want enabled.