Question

I have a question similar to this and this. I have a menu that appears on top of other content on a button-click. I want the menu to close if the user clicks anywhere outside the menu. There is lots of other ‘stuff’ that could be clickable while the menu is up – I want any click to just close my menu. In effect, I want the menu to be modal, still be able to see what’s behind it, and any outside click closes it without activating the thing you clicked on.

I’ve created a absolute-positioned div with z-order just below the menu container div. The ‘underlying’ div has a click event to close the menu. When the underlying div has a background color so I can see it, everything works great. But I want this underlying div to be transparent. When I remove the background color, it no longer gets the click event!

Answers to the linked question suggested adding a click event to the body or document itself to close the menu, but I don’t really want to do that becuase the menu won’t be up all the time. Plus, once it’s down, there’s no need to capture clicks.

What do I need to do to the ‘underlying’ div to make it transparent but still capture the click event?

EDIT: What seems to work but makes little sense is this:

1. Style the underlying div to have a background color.
2. In jQuery, set its opacity to 0.

Now the div is transparent and captures events. ???

Answer 1

A transparent background lets the background elements click through, by changing it to opacity of 0 your still clicking on the background. It’d be the same as adding a 1×1 clear .gif or .png and tiling it on the background – it’s allowing for something to be clickable

Edited to include the link from the comment – it exactly describes my problem: link.

Thanks!