Close a div menu after clicking outside it

See more:

jQuery

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.