jquery - 如何通过单击外部隐藏弹出窗口

Question

我试图想出一种方法，以便一旦#email-popup 或#phone-popup 可见，如果用户单击可见弹出窗口以外的任何位置，那么它将隐藏弹出窗口。

我在下面的代码中隐藏弹出窗口的方法效果不佳......

到目前为止我的 JQuery

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

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

Answer 1

你已经接近了——当用户在弹出窗口中点击时停止传播：

$("#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();
});

此外，您在文档单击中有一些重复的代码。您将电子邮件弹出窗口隐藏了两次。

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

Answer 2

您可以检查单击的元素的 ID（不适用于元素的子元素）：

$(".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");                        
     }
});

示范

Answer 3

效果不好怎么办？会发生什么？顺便说一句，您在处理程序中隐藏#email-popup了两次。click