popup box when user clicks

popup box when user clicks

Guys, I'm new to jQuery and I'm trying to create a popup-box as soon as a button is clicked. I've got an example for you guys to visualize what I'm talking about. 

Here it is the example:  HTML Example

As you can see (view source) I've used two different methods to accomplish the same thing.

Method 1.
                  $(document).ready(function(){
var button = $('#actionFeature ul li.sharethis a');
var box = $('.popUpBox');
$(button).click(function() {
$(box).toggle();
                   });
         });
Method 2.
$(document).ready(function(){
var button = $('#actionFeature ul li.sharethis a');
var box = $('.popUpBox');
$(button).toggle(function(){
$(box).addClass('visible');
}, function(){
$(box).removeClass('visible');
});
});

It works pretty good for the hide and show. One method uses the click event the other one use remove and add class. The problem is that I need the box to go away if the user clicks away from the box. Another words, if they click on any other part of the page or cancel button i need to hide the box. I'm not a coder ( but ive been reading DOM scripting) so my coding skills are very limited. 

Thank you!