I'm trying to create a "
glass pane " in JavaScript, similar to or supported by Java . The goal is to offer a kind of interactive help to the user, where information about each element is superimposed on the screen, and all elements except the one being explained are disabled.
Creating the glass pane is easy - just a fixed element occupying the entire screen . Disabling all elements except one can be done through the disabled and readonly properties, or intercepting events in the capture phase . The problem is to make the glass pane not block elements that are "behind" it.
For a demonstration of the problem, see this example in jsFiddle - all elements work normally, until the link "Help "is clicked; from there, everything that is "behind the glass pane" stops working, since the mouse and keyboard events will all stop in the glass pane. I would like the glass pane to "let pass" events to what's behind it, just as the Java version allows.
Note: This should preferably occur regardless of your degree of transparency, or even having things drawn on it (I would like to put arrows and things like that).
Workaround
Do not use a glass pane, but individual elements that do not block the element in focus. Example . Although not the ideal solution, this and some more conditional styling of the content could result in more or less what I want - but in a much more painful way ...