如何通过单击外部隐藏弹出窗口 [英] How to hide a popup by clicking outside

问题描述

我正在尝试提出一种方法，使#email-popup或#phone-popup可见后，如果用户单击除可见弹出窗口之外的任何位置，则它将隐藏该弹出窗口.

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 popup.

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

My method for hiding the popups in the code below does not work well...

到目前为止，我的JQuery

My JQuery so far

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

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

推荐答案

您已经关闭-当用户在弹出窗口中单击时，只需停止传播即可.

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

这篇关于如何通过单击外部隐藏弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！