Sorry, my original post helps you keep only one popup open at a time. To
offer "click out" behavior without a mask (allowing your other links to
work) you need an event handler on the document.body.
document.id(document.body).addEvent('click', function(event){
if (Popup.current && !Popup.element.contains(event.target)) {
Popup.current.hide();
delete popup.current;
}
});
The only thing to be wary of is if the link click to show a popup fires
first, you'll close the current one immediately (because the event will
bubble up), so your event handler for the links that show popups should call
.stopPropagation() on the event to keep it from getting to the document
body. You also have to check that the user didn't just click inside the
popup (as the code above does).
On Sun, Oct 23, 2011 at 2:08 PM, Sanford Whiteman <[email protected]>wrote:
> There's no reason the main mask can't receive the event. Fire the event on
> the main mask from the other pieces -- or simply add the same event listener
> to all elements with a 'mask' class. It's not a good reason to avoid my
> approach.
>
> (The CSS isn't so special, either. I was talking about the ~ combinator
> more than anything else. I used it just for (theoretical) performance +
> conciseness. You could use the usual CSS all-child-elements combinator
> instead, supported everywhere.)
>
> -- S.
>
