Question

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

DEMONSTRATION

Answer 3

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

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

3 个答案: