如何在点击弹出窗口外部时隐藏弹出窗口

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

- AnchovyLegend

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

- Sampson

---

@MHZ 是的，它可以 - 这是基本的jQuery。请展示一下你如何实现它。 - Sampson

@MHZ，你需要在.email和.phone上停止事件传播。 - Sampson

它对我不起作用:( 不知道为什么.. 我只是复制和粘贴了代码，看起来应该可以工作，弹出窗口出现了，但当我点击其他地方时却从未消失... - AnchovyLegend

你是在哪个弹出窗口上尝试它？你的文档点击只会隐藏“email-popup”。 - Sampson

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

DEMONSTRATION

- adeneo

---

这个不起作用，它的行为方式与上面发布的代码相同，弹出窗口只是瞬间出现和消失...谢谢。 - AnchovyLegend

你应该修改你的评论以匹配你在 jsfiddle 上的 jQuery。你在 jsfiddle 上的解决方案对我有用！但是上面发布的那个解决方案却不行:) 谢谢！ - AnchovyLegend

Answer 3

它有什么问题？发生了什么事？顺便说一下，在您的click处理程序中两次隐藏了#email-popup。

- JMM

---

弹出窗口立即出现并消失。 - AnchovyLegend

@JMM 这更像是一条评论而不是一个答案。 - Sampson