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

我试图提出一种方法，以便一旦#eam-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

它怎么样不好用？ 怎么了？ 顺便说一下，你在click处理程序中隐藏了两次#email-popup 。