How to hide a popup by clicking outside

Question

I am trying to come up with a way so that once #email-popup or #phone-popup is visible, if the user clicks anywhere EXCEPT the visible popup, then it is going to hide the po

Answer 1

You could check the ID of the element clicked (won't work on children of the elements) :

$(".email").click(function(e){
    e.stopPropagation();
    $("#email-popup").show("fast");
});
$(".phone").click(function(e){
    e.stopPropagation();
    $("#phone-popup").show("fast");
});

$(document).click(function(e) {
     if (!(e.target.id === 'email-popup' || e.target.id === 'phone-popup')) {
         $("#email-popup, #phone-popup").hide("fast");                        
     }
});

DEMONSTRATION

Answer 2

You're close - just stop the propagation when the user clicks within the popups:

$("#email-popup, #phone-popup").on("click", function(e){
  e.stopPropagation();
});

$(".email").on("click", function(e){
  e.stopPropagation();
  $("#email-popup").show("fast");
});

$(".phone").on("click", function(e){
  e.stopPropagation();
  $("#phone-popup").show();
});

Also you have some repeated code in the document click. You're hiding the email popup twice.

$(document).on("click", function() {
  $("#email-popup, #phone-popup").hide("fast");
});

Answer 3

What about it doesn't work well? What does happen? By the way, you're hiding #email-popup twice in your click handler.