Click here to Skip to main content
14,635,966 members
Rate this:
Please Sign up or sign in to vote.
See more:
I have the next HTML code:
// Container for link where users will click to open the second div

<div class="topbar-block topbar-profile-options">
   <a class="open-popup-on-click" data-popup-id="topbar-user-actions"></a>
</div>

// Container-popup

<div id="topbar-user-actions" class="hidden popup"></div>

Click here to see full code (Github project).

And the jQuery code (it's a generalized code, to work with all links with class open-popup-on-click):
$('.open-popup-on-click').unbind('click').click(function() {
    $('#' + $(this).data('popup-id')).toggleClass('hidden');
    return false;
  });

Click here to see full code (Github project).

Now I want to generalize this jQuery code, to also close the menus when clicking outside the popup.

I have been looking for an answer two days, but I can't get a jQuery code to work as I want (open/close on normal way, and hide when clicking outside popup).

Please, could someone help me? The most important for me is to understand your code, not just getting an answer.

Thanks in advance.
Posted
Updated 28-Feb-13 8:40am
v2
Comments
fjdiewornncalwe 28-Feb-13 15:07pm
   
Instead of requiring a click outside the div, what about using the onmouseleave event?
Leandro Crisol 28-Feb-13 15:14pm
   
What will be the behaviour of the code at mobile devices?
fjdiewornncalwe 28-Feb-13 15:33pm
   
I wasn't thinking about that, sorry... :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100