Completely disable focus of elements in a parent

Question

Suppose I have a link, which would fade out the entire page when link is clicked. The reason I fade out the page is because a next page is about to load, but it is not loaded yet. I can use pointer-events: none which will disable any mouse events until the next page is loaded.

Suppose it was done with the keyboard, I could use the following to prevent double-enter, or to cleanly disable all elements within, for example tab-enter would be disabled this way as well.

parent.onkeydown = fals
parent.onkeyup = fals
parent.onkeypress = fals
function fals() {return false}

This works well for short loads, but if it takes a long time to load, the user may notice the following difficulties.

• Cannot tab away from the a tag.
• Cannot use several of the keyboard shortcuts which would control the browser.
• Able to tab into the disabled area from the address bar.

Is there a modern and slick way to prevent these 3 problems, other than setting an onfocus=blur for all of the child elements? I do not care about IE today.

Answer 1

I think the commonly accepted way of dealing with things like what you're talking about is to use Modal's, which is to say when they click that link, you pop up a box that says 'Processing' or something like that, and you create a fullscreen div with a z-index above everything else so the user can't click / interact with anything else on the screen until you're done doing whatever it is you are doing.

See http://twitter.github.com/bootstrap/javascript.html#modals for an example of what i'm talking about.