I have a web page with several buttons where each will display a window containing input fields (radio buttons, text fields, etc.). There are also a couple of other buttons on the page that initiate AJAX actions. The behavior that I would LIKE to have is: when one of the windows is open, clicking another button will close the open window, and then initiate the other action (opening a corresponding window, or making the AJAX call). In order to try to get this behavior, I'm using a nearly-transparent full-page Mask whenever I display a pop-up window. I'm using hideOnClick: true for the Mask, and have an onHide event handler for the Mask that hides the currently open pop-up window. The problem with this approach is: the mouse click event gets "swallowed" by the Mask. So, if the user had clicked one of the other buttons, he ends up having to click it AGAIN because the first click went to the Mask, and the button that the user clicked (under the transparent Mask) never got the click.
Is there some way to have an onClick event for the Mask, but still allow the mouse click to "pass through" the Mask, as if the Mask were not there? If not, then I guess I have two other options: (1) Put a "Close" button inside each pop-up window, and don't hide the mask on click. This will make the windows have "modal" behavior. The user will have to click twice (once on the Close button, and then a second time on the button representing his next desired action), but at least the user will KNOW that he has to click twice. (2) Don't use the Mask at all. For each of the other buttons on the page -- the buttons that display a pop-up window and the buttons that issue AJAX calls -- add code to the onClick handler that closes whatever pop-up window is currently open. If there's no trick to propagate the click "through" the Mask, I'll probably go with option 2.
